diff --git a/docs/build/bundle.99be1485.js b/docs/build/bundle.4744580e.js similarity index 69% rename from docs/build/bundle.99be1485.js rename to docs/build/bundle.4744580e.js index d4edb910..381755ae 100644 --- a/docs/build/bundle.99be1485.js +++ b/docs/build/bundle.4744580e.js @@ -69,4 +69,4 @@ Object.defineProperty(n,"__esModule",{value:!0});var a=null,r=!1,o=3,i=-1,s=-1,l * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. - */Object.defineProperty(n,"__esModule",{value:!0});var r="function"==typeof Symbol&&Symbol.for,o=r?Symbol.for("react.element"):60103,i=r?Symbol.for("react.portal"):60106,s=r?Symbol.for("react.fragment"):60107,l=r?Symbol.for("react.strict_mode"):60108,c=r?Symbol.for("react.profiler"):60114,u=r?Symbol.for("react.provider"):60109,d=r?Symbol.for("react.context"):60110,p=r?Symbol.for("react.async_mode"):60111,h=r?Symbol.for("react.concurrent_mode"):60111,f=r?Symbol.for("react.forward_ref"):60112,m=r?Symbol.for("react.suspense"):60113,g=r?Symbol.for("react.memo"):60115,y=r?Symbol.for("react.lazy"):60116;function t(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case p:case h:case s:case c:case l:case m:return e;default:switch(e=e&&e.$$typeof){case d:case f:case u:return e;default:return t}}case y:case g:case i:return t}}}function v(e){return t(e)===h}n.typeOf=t,n.AsyncMode=p,n.ConcurrentMode=h,n.ContextConsumer=d,n.ContextProvider=u,n.Element=o,n.ForwardRef=f,n.Fragment=s,n.Lazy=y,n.Memo=g,n.Portal=i,n.Profiler=c,n.StrictMode=l,n.Suspense=m,n.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===s||e===h||e===c||e===l||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===g||e.$$typeof===u||e.$$typeof===d||e.$$typeof===f)},n.isAsyncMode=function(e){return v(e)||t(e)===p},n.isConcurrentMode=v,n.isContextConsumer=function(e){return t(e)===d},n.isContextProvider=function(e){return t(e)===u},n.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},n.isForwardRef=function(e){return t(e)===f},n.isFragment=function(e){return t(e)===s},n.isLazy=function(e){return t(e)===y},n.isMemo=function(e){return t(e)===g},n.isPortal=function(e){return t(e)===i},n.isProfiler=function(e){return t(e)===c},n.isStrictMode=function(e){return t(e)===l},n.isSuspense=function(e){return t(e)===m}},function(e,t,n){var a=n(125),r=n(32),o=n(95);e.exports=function createFind(e){return function(t,n,i){var s=Object(t);if(!r(t)){var l=a(n,3);t=o(t),n=function(e){return l(s[e],e,s)}}var c=e(t,n,i);return c>-1?s[l?t[c]:c]:void 0}}},function(e,t,n){var a=n(649),r=n(125),o=n(650),i=Math.max;e.exports=function findIndex(e,t,n){var s=null==e?0:e.length;if(!s)return-1;var l=null==n?0:o(n);return l<0&&(l=i(s+l,0)),a(e,r(t,3),l)}},function(e,t){e.exports=function baseFindIndex(e,t,n,a){for(var r=e.length,o=n+(a?1:-1);a?o--:++oset @wikia:registry https://artifactory.wikia-inc.com/artifactory/api/npm/wikia-npm/\n```\n\n### 1.2. Add the package to `package.json`\n\n```js\n$> yarn add @wikia/react-common\n```\n\nor\n\n```js\n$> npm i @wikia/react-common\n```\n\n## 2. Use it in the code\n\n```js\nimport Button from \'@wikia/react-common/components/Button\';\nimport IconAdd from \'@wikia/react-common/icons/IconAdd\';\n\n...\n\n<div>\n <Button>\n <IconAdd />\n Camera\n </Button>\n</div>\n```\n\n## 3. Add the CSS to your build\n\nMake sure you include the CSS in your styles.\n\n```scss\n@import "~@wikia/react-common/components/Icon.css";\n@import "~@wikia/react-common/components/Button.css";\n```'}]},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a);n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"## **[IMPORTANT]** Artifactory Setup\n\nThis setup will work for both `yarn` and `npm`. If you run into issues consult [Artifactory NPM Docs](https://www.jfrog.com/confluence/display/RTF/Npm+Registry) first\n\n1. Verify you can login to [Artifactory Wikia](https://artifactory.wikia-inc.com/artifactory/webapp/#/home)\n2. Change wikia scoped packages to use artifactory\n - `$> npm config set @wikia:registry https://artifactory.wikia-inc.com/artifactory/api/npm/wikia-npm/`\n3. Login\n - `$> npm login --scope=@wikia`\n - Use artifactory login and artifactory API key for password by going to \"Edit Profile\" in artifactory web ui\n\n## General guidelines\n\n- ES6 React components with [`prop-types`](https://github.com/facebook/prop-types) saved in `.js` file.\n- Use function syntax if possible, use nesting and flat files.\n- 100% lint and coverage and no regressions\n- use [Jest](https://facebook.github.io/jest/) as a general testing framework and for testing component's rendering\n- use [Enzyme](https://github.com/airbnb/enzyme) for testing interactions\n- use [Sinon](http://sinonjs.org/) for testing callbacks\n\n## Step-by-step guide for components\n\n1. Assuming the new component's name is `ComponentA` all it's files will be in `/source/components/ComponentA/` directory.\n2. Create component in `ComponentA/index.js`.\n3. Add component to `/source/components/index.js`.\n4. Add component to `/config/styleguide.config.json`.\n5. (optionally) create styles in `ComponentA/styles.s?css` and import them in `ComponentA/index.js`.\n6. Document the usage and props in JSDocs in `ComponentA/index.js`.\n7. Add example or examples in `ComponentA/README.md`.\n8. Add unit test in `ComponentA/index.spec.js`, aim for 100% coverage and all the test cases.\n9. Create new Pull Request.\n10. Code will be merged to `master` only if there are no regressions and after a successful CR.\n11. When the code is merged to `master`, release new version of the styleguide with one of the release commands.\n\n### HOCS\n\n1. Higher order components (hoc) can be added by following the guide\n\n**Note**: The one difference will be to use `js static` in the readme to prevent rendering as styleguidist doesn't have access to the hoc\n\n## Development server\n\n```js\n> yarn dev\n```\n\n## Tests\n\nThe easiest way is to run the full suite:\n\n```js\n> yarn ci\n```\n\nIt will run linting (ESLint, Stylelint), Jest and will output coverage report.\n\n### Watch\n\nThere's a command for watching Jest tests:\n\n```js\n> yarn test:watch\n```\n\n## Build\n\nRunning the build is as simple as:\n\n```js\n> yarn build\n```\n\nThis will run few build commands in sequence:\n\n1. Remove every generated file and directory from the `dist/` directory (equivalent of `yarn clean`).\n2. Build the library outputting built ES5 files to the `dist/` (`yarn lib:build`).\n3. Build the styleguide in the `docs/` directory; it contains the build styleguide that will appear on the GitHub pages (`yarn styleguide:build`).\n\n## Release\n\nAfter PR is merged into `master` branch create new release. You should use [SemVer](http://semver.org/) using one of the following commands.\n\nThe script will automatically pull newest `master` branch, build the documentation, create new release version in the `package.json`, create GitHub tag and push this tag to GitHub. After pushing the new tag it will publish the package to artifactory.\n\n### Default release; bugfixes, no new features and no breaking changes\n\n```js\n> yarn release\n```\n\n### New features, but no breaking changes\n\n```js\n> yarn release:minor\n```\n\n### Breaking changes, regardless how small\n\n```js\n> yarn release:major\n```"}]},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a);n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:'Theme values are provided in two different ways:\n\n## Theme object\n\nThe main `theme` is just an object with values than can be easily used in plain JavaScript:\n\nCan be used in plain JS\n\n```js\nimport theme from \'@wikia/react-common/theme\';\n\nconsole.log(theme.color.fandom_aqua); // outputs \'#00d6d6\'\nconsole.log(theme.color.font_size.l); // outputs \'18px\'\n```\n\nBut it\'s also a [ThemeProvider](https://www.styled-components.com/docs/advanced#theming)-ready:\n\n```js\nimport theme from \'@wikia/react-common/theme\';\n\nconst AquaText = styled.span`\n color: ${props => props.theme.color.fandom_aqua};\n font-family: ${props => props.theme.font_family};\n font-size: ${props => props.theme.font_size.l};\n\n @media ${props => props.theme.media.large_up} {\n font-size: ${props => props.theme.font_size.xl}\n }\n`;\n\nexport default () => (\n <ThemeProvider theme={theme}>\n <AquaText>O hai</AquaText>\n </ThemeProvider>\n);\n```\n\n### Theme object structure\n\nHere\'s how the object looks like (values omitted):\n\n```js\nconst theme = {\n breakpoint_values: /* .. */,\n breakpoint_available_width: /* .. */,\n breakpoint_available_width_values: /* same as `breakpoint_available_width` without units */,\n color: /* .. */,\n color_theme: {\n light: /* .. */,\n dark: /* .. */,\n },\n content_well_margin: /* ... */,\n content_well_margin_value: /* same as `content_well` without units */,\n font_family: /* .. */,\n font_size: /* .. */,\n font_size_value: /* same as `font_size` without units */,\n font_weight: /* ... */,\n line_height: /* ... */,\n media: /* ... */,\n};\n```\n\nYou can see `theme`\'s values in the [source](https://github.com/Wikia/react-common/blob/master/source/theme/index.js).\n\n## Changing theme (customization)\n\nIf you want to change/override or add new values to the `theme`, there\'s a handy function for that:\n\n```js\nimport generateTheme from \'@wikia/react-common/theme/generateTheme\';\n\nconst customTheme = generateTheme({\n color: {\n link: \'blue\',\n },\n});\n```\n\n## Separate theme values\n\nIf you don\'t need the object, there are separate values available:\n\n### Breakpoints\n\nThe [`@wikia/react-common/theme/breakpoints`](https://github.com/Wikia/react-common/blob/master/source/theme/breakpoints.js) exports the following consts:\n\n- `BREAKPOINTS`\n- `MEDIAQUERIES`\n- `CONTENT_WELL_MARGIN`\n- `CONTENT_WELL_MARGIN_PX`\n- `BREAKPOINTS_AVAILABLE_WIDTH`\n- `BREAKPOINTS_AVAILABLE_WIDTH_PX`\n\n### Colors\n\nThe [`@wikia/react-common/theme/colors`](https://github.com/Wikia/react-common/blob/master/source/theme/colors.js) exports the following consts:\n\n- `COLORS`\n- `COLORS_LIGHT_THEME`\n- `COLORS_DARK_THEME`\n\n### Typography\n\nThe [`@wikia/react-common/theme/typography`](https://github.com/Wikia/react-common/blob/master/source/theme/typography.js) exports the following consts:\n\n- `FONT_FAMILY`\n- `LINE_HEIGHTS`\n- `FONT_WEIGHTS`\n- `FONT_SIZES`\n- `FONT_SIZES_PX`'}]},function(e,t,n){var a={react:n(0),"styled-components":n(3),"./IconActivity":n(178),"./IconActivitySmall":n(180),"./IconActivityTiny":n(182),"./IconAdd":n(184),"./IconAddSmall":n(67),"./IconAddTiny":n(187),"./IconAlert":n(189),"./IconAlertSmall":n(38),"./IconAlertTiny":n(192),"./IconArrow":n(194),"./IconArrowSmall":n(196),"./IconArrowTiny":n(198),"./IconAvatar":n(39),"./IconAvatarSmall":n(201),"./IconAvatarTiny":n(203),"./IconBell":n(205),"./IconBellSmall":n(207),"./IconBellTiny":n(209),"./IconBold":n(211),"./IconBoldActive":n(213),"./IconBoldActiveSmall":n(215),"./IconBoldActiveTiny":n(217),"./IconBoldSmall":n(219),"./IconBoldTiny":n(221),"./IconBook":n(223),"./IconBookSmall":n(225),"./IconBookTiny":n(227),"./IconBookmark":n(229),"./IconBookmarkSmall":n(231),"./IconBookmarkTiny":n(233),"./IconBubble":n(235),"./IconBubbleSmall":n(237),"./IconBubbleTiny":n(239),"./IconBulletList":n(241),"./IconBulletListSmall":n(243),"./IconBulletListTiny":n(245),"./IconCalendar":n(247),"./IconCalendarSmall":n(249),"./IconCalendarTiny":n(251),"./IconCamera":n(253),"./IconCameraSmall":n(255),"./IconCameraTiny":n(257),"./IconCheckbox":n(259),"./IconCheckboxEmpty":n(261),"./IconCheckboxEmptySmall":n(68),"./IconCheckboxEmptyTiny":n(264),"./IconCheckboxSmall":n(69),"./IconCheckboxTiny":n(267),"./IconCheckmark":n(411),"./IconCheckmarkSmall":n(70),"./IconCheckmarkTiny":n(271),"./IconClipboard":n(273),"./IconClipboardSmall":n(275),"./IconClipboardTiny":n(277),"./IconClock":n(279),"./IconClockSmall":n(281),"./IconClockTiny":n(283),"./IconClose":n(285),"./IconCloseSmall":n(40),"./IconCloseTiny":n(71),"./IconComment":n(289),"./IconCommentSmall":n(291),"./IconCommentTiny":n(293),"./IconControls":n(295),"./IconControlsSmall":n(297),"./IconControlsTiny":n(299),"./IconCross":n(301),"./IconCrossSmall":n(303),"./IconCrossTiny":n(305),"./IconDashboard":n(307),"./IconDashboardSmall":n(309),"./IconDashboardTiny":n(311),"./IconDiscord":n(313),"./IconDownload":n(315),"./IconDownloadSmall":n(317),"./IconDownloadTiny":n(319),"./IconDropdown":n(72),"./IconDropdownSmall":n(322),"./IconDropdownTiny":n(41),"./IconEnvelope":n(325),"./IconEnvelopeSmall":n(327),"./IconEnvelopeTiny":n(329),"./IconError":n(330),"./IconErrorSmall":n(73),"./IconErrorTiny":n(333),"./IconExternal":n(335),"./IconExternalSmall":n(337),"./IconExternalTiny":n(339),"./IconEye":n(341),"./IconEyeCrossed":n(343),"./IconEyeCrossedSmall":n(345),"./IconEyeCrossedTiny":n(346),"./IconEyeSmall":n(347),"./IconEyeTiny":n(349),"./IconFacebook":n(350),"./IconFacebookSmall":n(352),"./IconFacebookTiny":n(354),"./IconFandom":n(356),"./IconFandomSmall":n(358),"./IconFandomTiny":n(360),"./IconFlag":n(362),"./IconFlagSmall":n(77),"./IconFlagTiny":n(365),"./IconFootnote":n(367),"./IconFootnoteSmall":n(369),"./IconFootnoteTiny":n(371),"./IconGear":n(373),"./IconGearSmall":n(375),"./IconGearTiny":n(377),"./IconGoogleplus":n(379),"./IconGrid":n(381),"./IconGridSmall":n(383),"./IconGridTiny":n(385),"./IconGripper":n(386),"./IconGripperSmall":n(388),"./IconGripperTiny":n(390),"./IconH2":n(392),"./IconH2Small":n(394),"./IconH2Tiny":n(396),"./IconH3":n(398),"./IconH3Small":n(400),"./IconH3Tiny":n(402),"./IconHeart":n(404),"./IconHeartFilled":n(406),"./IconHeartFilledSmall":n(408),"./IconHeartFilledTiny":n(410),"./IconHeartSmall":n(409),"./IconHeartTiny":n(407),"./IconHome":n(405),"./IconHomeSmall":n(403),"./IconHomeTiny":n(401),"./IconImage":n(399),"./IconImageSmall":n(397),"./IconImageTiny":n(395),"./IconImages":n(393),"./IconImagesSmall":n(391),"./IconImagesTiny":n(389),"./IconIndentLeft":n(387),"./IconIndentLeftSmall":n(135),"./IconIndentLeftTiny":n(384),"./IconIndentRight":n(382),"./IconIndentRightSmall":n(380),"./IconIndentRightTiny":n(378),"./IconInstagram":n(376),"./IconItalics":n(374),"./IconItalicsSmall":n(372),"./IconItalicsTiny":n(370),"./IconLeftAlign":n(368),"./IconLeftAlignSmall":n(366),"./IconLeftAlignTiny":n(364),"./IconLine":n(363),"./IconLink":n(361),"./IconLinkSmall":n(359),"./IconLinkTiny":n(357),"./IconLinkedin":n(355),"./IconLoading":n(353),"./IconLock":n(351),"./IconLockSmall":n(76),"./IconLockTiny":n(348),"./IconMagnifyingGlass":n(75),"./IconMagnifyingGlassSmall":n(74),"./IconMagnifyingGlassTiny":n(344),"./IconMap":n(342),"./IconMapSmall":n(340),"./IconMapTiny":n(338),"./IconMeneame":n(336),"./IconMenu":n(334),"./IconMenuControl":n(332),"./IconMenuControlSmall":n(331),"./IconMenuControlTiny":n(42),"./IconMenuSmall":n(328),"./IconMenuTiny":n(326),"./IconMessage":n(324),"./IconMessageSmall":n(323),"./IconMessageTiny":n(321),"./IconMore":n(320),"./IconMoreSmall":n(318),"./IconMoreTiny":n(316),"./IconNk":n(314),"./IconNumberedList":n(312),"./IconNumberedListSmall":n(310),"./IconNumberedListTiny":n(308),"./IconOdnoklassniki":n(306),"./IconPage":n(304),"./IconPageList":n(302),"./IconPageListSmall":n(300),"./IconPageListTiny":n(298),"./IconPageSmall":n(296),"./IconPageTiny":n(294),"./IconPages":n(292),"./IconPagesSmall":n(290),"./IconPagesTiny":n(288),"./IconParagraph":n(287),"./IconParagraphSmall":n(286),"./IconParagraphTiny":n(284),"./IconPause":n(282),"./IconPauseSmall":n(280),"./IconPauseTiny":n(278),"./IconPencil":n(276),"./IconPencilSmall":n(274),"./IconPencilTiny":n(272),"./IconPin":n(270),"./IconPinSmall":n(269),"./IconPinTiny":n(268),"./IconPlay":n(266),"./IconPlaySmall":n(265),"./IconPlayTiny":n(263),"./IconPoll":n(262),"./IconPollSmall":n(260),"./IconPollTiny":n(258),"./IconPreformat":n(256),"./IconPreformatSmall":n(254),"./IconPreformatTiny":n(252),"./IconQuestion":n(250),"./IconQuestionSmall":n(248),"./IconQuestionTiny":n(246),"./IconQuiz":n(244),"./IconQuizSmall":n(242),"./IconQuizTiny":n(240),"./IconQuote":n(238),"./IconQuoteSmall":n(236),"./IconQuoteTiny":n(234),"./IconQzone":n(232),"./IconRadioActive":n(230),"./IconRadioActiveSmall":n(228),"./IconRadioActiveTiny":n(226),"./IconRadioEmpty":n(224),"./IconRadioEmptySmall":n(222),"./IconRadioEmptyTiny":n(220),"./IconReddit":n(218),"./IconRedditSmall":n(216),"./IconRedditTiny":n(214),"./IconRefresh":n(212),"./IconRefreshSmall":n(210),"./IconRefreshTiny":n(208),"./IconReply":n(206),"./IconReplySmall":n(204),"./IconReplyTiny":n(202),"./IconShare":n(200),"./IconShareSmall":n(199),"./IconShareTiny":n(197),"./IconSitemap":n(195),"./IconSitemapSmall":n(193),"./IconSitemapTiny":n(191),"./IconSound":n(190),"./IconSoundOff":n(188),"./IconSoundOffSmall":n(186),"./IconSoundOffTiny":n(185),"./IconSoundSmall":n(183),"./IconSoundTiny":n(181),"./IconTag":n(179),"./IconTagSmall":n(66),"./IconTagTiny":n(177),"./IconText":n(176),"./IconTextSmall":n(175),"./IconTextTiny":n(174),"./IconTrash":n(173),"./IconTrashOpen":n(172),"./IconTrashOpenSmall":n(171),"./IconTrashOpenTiny":n(170),"./IconTrashSmall":n(169),"./IconTrashTiny":n(168),"./IconTumblr":n(167),"./IconTwitter":n(166),"./IconTwitterSmall":n(165),"./IconTwitterTiny":n(164),"./IconUnlock":n(163),"./IconUnlockSmall":n(162),"./IconUnlockTiny":n(161),"./IconUpvote":n(160),"./IconUpvoteSmall":n(159),"./IconUpvoteTiny":n(158),"./IconUser":n(157),"./IconUserSmall":n(156),"./IconUserTiny":n(155),"./IconUsers":n(154),"./IconUsersSmall":n(153),"./IconUsersTiny":n(152),"./IconVideo":n(151),"./IconVideoSmall":n(150),"./IconVideoTiny":n(149),"./IconVkontakte":n(148),"./IconWatch":n(147),"./IconWatchSmall":n(146),"./IconWatchTiny":n(145),"./IconWeibo":n(144),"./IconWykop":n(143),"./IconYoutube":n(142),"./IconZoomIn":n(141),"./IconZoomInSmall":n(140),"./IconZoomInTiny":n(139),"./IconZoomOut":n(138),"./IconZoomOutSmall":n(137),"./IconZoomOutTiny":n(136)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"There are three basic icon sizes: regular (24px), small (18px) and tiny (12px).\nEvery icon component has `size` prop that can modify it's height and width;\nin addition every icon's `fill` color is defaulted to current color.\n\nUsage:\n\n```js\n@import <IconComponent> from '@wikia/react-common/icons/<IconComponent>';\n```\n\nHere's the list of all the icons in different sizes; hover over icon to see component's name"},{type:"code",content:"const React = require('react');\nconst styled = require('styled-components').default;\nconst IconActivity = require('./IconActivity').default;\nconst IconActivitySmall = require('./IconActivitySmall').default;\nconst IconActivityTiny = require('./IconActivityTiny').default;\nconst IconAdd = require('./IconAdd').default;\nconst IconAddSmall = require('./IconAddSmall').default;\nconst IconAddTiny = require('./IconAddTiny').default;\nconst IconAlert = require('./IconAlert').default;\nconst IconAlertSmall = require('./IconAlertSmall').default;\nconst IconAlertTiny = require('./IconAlertTiny').default;\nconst IconArrow = require('./IconArrow').default;\nconst IconArrowSmall = require('./IconArrowSmall').default;\nconst IconArrowTiny = require('./IconArrowTiny').default;\nconst IconAvatar = require('./IconAvatar').default;\nconst IconAvatarSmall = require('./IconAvatarSmall').default;\nconst IconAvatarTiny = require('./IconAvatarTiny').default;\nconst IconBell = require('./IconBell').default;\nconst IconBellSmall = require('./IconBellSmall').default;\nconst IconBellTiny = require('./IconBellTiny').default;\nconst IconBold = require('./IconBold').default;\nconst IconBoldActive = require('./IconBoldActive').default;\nconst IconBoldActiveSmall = require('./IconBoldActiveSmall').default;\nconst IconBoldActiveTiny = require('./IconBoldActiveTiny').default;\nconst IconBoldSmall = require('./IconBoldSmall').default;\nconst IconBoldTiny = require('./IconBoldTiny').default;\nconst IconBook = require('./IconBook').default;\nconst IconBookSmall = require('./IconBookSmall').default;\nconst IconBookTiny = require('./IconBookTiny').default;\nconst IconBookmark = require('./IconBookmark').default;\nconst IconBookmarkSmall = require('./IconBookmarkSmall').default;\nconst IconBookmarkTiny = require('./IconBookmarkTiny').default;\nconst IconBubble = require('./IconBubble').default;\nconst IconBubbleSmall = require('./IconBubbleSmall').default;\nconst IconBubbleTiny = require('./IconBubbleTiny').default;\nconst IconBulletList = require('./IconBulletList').default;\nconst IconBulletListSmall = require('./IconBulletListSmall').default;\nconst IconBulletListTiny = require('./IconBulletListTiny').default;\nconst IconCalendar = require('./IconCalendar').default;\nconst IconCalendarSmall = require('./IconCalendarSmall').default;\nconst IconCalendarTiny = require('./IconCalendarTiny').default;\nconst IconCamera = require('./IconCamera').default;\nconst IconCameraSmall = require('./IconCameraSmall').default;\nconst IconCameraTiny = require('./IconCameraTiny').default;\nconst IconCheckbox = require('./IconCheckbox').default;\nconst IconCheckboxEmpty = require('./IconCheckboxEmpty').default;\nconst IconCheckboxEmptySmall = require('./IconCheckboxEmptySmall').default;\nconst IconCheckboxEmptyTiny = require('./IconCheckboxEmptyTiny').default;\nconst IconCheckboxSmall = require('./IconCheckboxSmall').default;\nconst IconCheckboxTiny = require('./IconCheckboxTiny').default;\nconst IconCheckmark = require('./IconCheckmark').default;\nconst IconCheckmarkSmall = require('./IconCheckmarkSmall').default;\nconst IconCheckmarkTiny = require('./IconCheckmarkTiny').default;\nconst IconClipboard = require('./IconClipboard').default;\nconst IconClipboardSmall = require('./IconClipboardSmall').default;\nconst IconClipboardTiny = require('./IconClipboardTiny').default;\nconst IconClock = require('./IconClock').default;\nconst IconClockSmall = require('./IconClockSmall').default;\nconst IconClockTiny = require('./IconClockTiny').default;\nconst IconClose = require('./IconClose').default;\nconst IconCloseSmall = require('./IconCloseSmall').default;\nconst IconCloseTiny = require('./IconCloseTiny').default;\nconst IconComment = require('./IconComment').default;\nconst IconCommentSmall = require('./IconCommentSmall').default;\nconst IconCommentTiny = require('./IconCommentTiny').default;\nconst IconControls = require('./IconControls').default;\nconst IconControlsSmall = require('./IconControlsSmall').default;\nconst IconControlsTiny = require('./IconControlsTiny').default;\nconst IconCross = require('./IconCross').default;\nconst IconCrossSmall = require('./IconCrossSmall').default;\nconst IconCrossTiny = require('./IconCrossTiny').default;\nconst IconDashboard = require('./IconDashboard').default;\nconst IconDashboardSmall = require('./IconDashboardSmall').default;\nconst IconDashboardTiny = require('./IconDashboardTiny').default;\nconst IconDiscord = require('./IconDiscord').default;\nconst IconDownload = require('./IconDownload').default;\nconst IconDownloadSmall = require('./IconDownloadSmall').default;\nconst IconDownloadTiny = require('./IconDownloadTiny').default;\nconst IconDropdown = require('./IconDropdown').default;\nconst IconDropdownSmall = require('./IconDropdownSmall').default;\nconst IconDropdownTiny = require('./IconDropdownTiny').default;\nconst IconEnvelope = require('./IconEnvelope').default;\nconst IconEnvelopeSmall = require('./IconEnvelopeSmall').default;\nconst IconEnvelopeTiny = require('./IconEnvelopeTiny').default;\nconst IconError = require('./IconError').default;\nconst IconErrorSmall = require('./IconErrorSmall').default;\nconst IconErrorTiny = require('./IconErrorTiny').default;\nconst IconExternal = require('./IconExternal').default;\nconst IconExternalSmall = require('./IconExternalSmall').default;\nconst IconExternalTiny = require('./IconExternalTiny').default;\nconst IconEye = require('./IconEye').default;\nconst IconEyeCrossed = require('./IconEyeCrossed').default;\nconst IconEyeCrossedSmall = require('./IconEyeCrossedSmall').default;\nconst IconEyeCrossedTiny = require('./IconEyeCrossedTiny').default;\nconst IconEyeSmall = require('./IconEyeSmall').default;\nconst IconEyeTiny = require('./IconEyeTiny').default;\nconst IconFacebook = require('./IconFacebook').default;\nconst IconFacebookSmall = require('./IconFacebookSmall').default;\nconst IconFacebookTiny = require('./IconFacebookTiny').default;\nconst IconFandom = require('./IconFandom').default;\nconst IconFandomSmall = require('./IconFandomSmall').default;\nconst IconFandomTiny = require('./IconFandomTiny').default;\nconst IconFlag = require('./IconFlag').default;\nconst IconFlagSmall = require('./IconFlagSmall').default;\nconst IconFlagTiny = require('./IconFlagTiny').default;\nconst IconFootnote = require('./IconFootnote').default;\nconst IconFootnoteSmall = require('./IconFootnoteSmall').default;\nconst IconFootnoteTiny = require('./IconFootnoteTiny').default;\nconst IconGear = require('./IconGear').default;\nconst IconGearSmall = require('./IconGearSmall').default;\nconst IconGearTiny = require('./IconGearTiny').default;\nconst IconGoogleplus = require('./IconGoogleplus').default;\nconst IconGrid = require('./IconGrid').default;\nconst IconGridSmall = require('./IconGridSmall').default;\nconst IconGridTiny = require('./IconGridTiny').default;\nconst IconGripper = require('./IconGripper').default;\nconst IconGripperSmall = require('./IconGripperSmall').default;\nconst IconGripperTiny = require('./IconGripperTiny').default;\nconst IconH2 = require('./IconH2').default;\nconst IconH2Small = require('./IconH2Small').default;\nconst IconH2Tiny = require('./IconH2Tiny').default;\nconst IconH3 = require('./IconH3').default;\nconst IconH3Small = require('./IconH3Small').default;\nconst IconH3Tiny = require('./IconH3Tiny').default;\nconst IconHeart = require('./IconHeart').default;\nconst IconHeartFilled = require('./IconHeartFilled').default;\nconst IconHeartFilledSmall = require('./IconHeartFilledSmall').default;\nconst IconHeartFilledTiny = require('./IconHeartFilledTiny').default;\nconst IconHeartSmall = require('./IconHeartSmall').default;\nconst IconHeartTiny = require('./IconHeartTiny').default;\nconst IconHome = require('./IconHome').default;\nconst IconHomeSmall = require('./IconHomeSmall').default;\nconst IconHomeTiny = require('./IconHomeTiny').default;\nconst IconImage = require('./IconImage').default;\nconst IconImageSmall = require('./IconImageSmall').default;\nconst IconImageTiny = require('./IconImageTiny').default;\nconst IconImages = require('./IconImages').default;\nconst IconImagesSmall = require('./IconImagesSmall').default;\nconst IconImagesTiny = require('./IconImagesTiny').default;\nconst IconIndentLeft = require('./IconIndentLeft').default;\nconst IconIndentLeftSmall = require('./IconIndentLeftSmall').default;\nconst IconIndentLeftTiny = require('./IconIndentLeftTiny').default;\nconst IconIndentRight = require('./IconIndentRight').default;\nconst IconIndentRightSmall = require('./IconIndentRightSmall').default;\nconst IconIndentRightTiny = require('./IconIndentRightTiny').default;\nconst IconInstagram = require('./IconInstagram').default;\nconst IconItalics = require('./IconItalics').default;\nconst IconItalicsSmall = require('./IconItalicsSmall').default;\nconst IconItalicsTiny = require('./IconItalicsTiny').default;\nconst IconLeftAlign = require('./IconLeftAlign').default;\nconst IconLeftAlignSmall = require('./IconLeftAlignSmall').default;\nconst IconLeftAlignTiny = require('./IconLeftAlignTiny').default;\nconst IconLine = require('./IconLine').default;\nconst IconLink = require('./IconLink').default;\nconst IconLinkSmall = require('./IconLinkSmall').default;\nconst IconLinkTiny = require('./IconLinkTiny').default;\nconst IconLinkedin = require('./IconLinkedin').default;\nconst IconLoading = require('./IconLoading').default;\nconst IconLock = require('./IconLock').default;\nconst IconLockSmall = require('./IconLockSmall').default;\nconst IconLockTiny = require('./IconLockTiny').default;\nconst IconMagnifyingGlass = require('./IconMagnifyingGlass').default;\nconst IconMagnifyingGlassSmall = require('./IconMagnifyingGlassSmall').default;\nconst IconMagnifyingGlassTiny = require('./IconMagnifyingGlassTiny').default;\nconst IconMap = require('./IconMap').default;\nconst IconMapSmall = require('./IconMapSmall').default;\nconst IconMapTiny = require('./IconMapTiny').default;\nconst IconMeneame = require('./IconMeneame').default;\nconst IconMenu = require('./IconMenu').default;\nconst IconMenuControl = require('./IconMenuControl').default;\nconst IconMenuControlSmall = require('./IconMenuControlSmall').default;\nconst IconMenuControlTiny = require('./IconMenuControlTiny').default;\nconst IconMenuSmall = require('./IconMenuSmall').default;\nconst IconMenuTiny = require('./IconMenuTiny').default;\nconst IconMessage = require('./IconMessage').default;\nconst IconMessageSmall = require('./IconMessageSmall').default;\nconst IconMessageTiny = require('./IconMessageTiny').default;\nconst IconMore = require('./IconMore').default;\nconst IconMoreSmall = require('./IconMoreSmall').default;\nconst IconMoreTiny = require('./IconMoreTiny').default;\nconst IconNk = require('./IconNk').default;\nconst IconNumberedList = require('./IconNumberedList').default;\nconst IconNumberedListSmall = require('./IconNumberedListSmall').default;\nconst IconNumberedListTiny = require('./IconNumberedListTiny').default;\nconst IconOdnoklassniki = require('./IconOdnoklassniki').default;\nconst IconPage = require('./IconPage').default;\nconst IconPageList = require('./IconPageList').default;\nconst IconPageListSmall = require('./IconPageListSmall').default;\nconst IconPageListTiny = require('./IconPageListTiny').default;\nconst IconPageSmall = require('./IconPageSmall').default;\nconst IconPageTiny = require('./IconPageTiny').default;\nconst IconPages = require('./IconPages').default;\nconst IconPagesSmall = require('./IconPagesSmall').default;\nconst IconPagesTiny = require('./IconPagesTiny').default;\nconst IconParagraph = require('./IconParagraph').default;\nconst IconParagraphSmall = require('./IconParagraphSmall').default;\nconst IconParagraphTiny = require('./IconParagraphTiny').default;\nconst IconPause = require('./IconPause').default;\nconst IconPauseSmall = require('./IconPauseSmall').default;\nconst IconPauseTiny = require('./IconPauseTiny').default;\nconst IconPencil = require('./IconPencil').default;\nconst IconPencilSmall = require('./IconPencilSmall').default;\nconst IconPencilTiny = require('./IconPencilTiny').default;\nconst IconPin = require('./IconPin').default;\nconst IconPinSmall = require('./IconPinSmall').default;\nconst IconPinTiny = require('./IconPinTiny').default;\nconst IconPlay = require('./IconPlay').default;\nconst IconPlaySmall = require('./IconPlaySmall').default;\nconst IconPlayTiny = require('./IconPlayTiny').default;\nconst IconPoll = require('./IconPoll').default;\nconst IconPollSmall = require('./IconPollSmall').default;\nconst IconPollTiny = require('./IconPollTiny').default;\nconst IconPreformat = require('./IconPreformat').default;\nconst IconPreformatSmall = require('./IconPreformatSmall').default;\nconst IconPreformatTiny = require('./IconPreformatTiny').default;\nconst IconQuestion = require('./IconQuestion').default;\nconst IconQuestionSmall = require('./IconQuestionSmall').default;\nconst IconQuestionTiny = require('./IconQuestionTiny').default;\nconst IconQuiz = require('./IconQuiz').default;\nconst IconQuizSmall = require('./IconQuizSmall').default;\nconst IconQuizTiny = require('./IconQuizTiny').default;\nconst IconQuote = require('./IconQuote').default;\nconst IconQuoteSmall = require('./IconQuoteSmall').default;\nconst IconQuoteTiny = require('./IconQuoteTiny').default;\nconst IconQzone = require('./IconQzone').default;\nconst IconRadioActive = require('./IconRadioActive').default;\nconst IconRadioActiveSmall = require('./IconRadioActiveSmall').default;\nconst IconRadioActiveTiny = require('./IconRadioActiveTiny').default;\nconst IconRadioEmpty = require('./IconRadioEmpty').default;\nconst IconRadioEmptySmall = require('./IconRadioEmptySmall').default;\nconst IconRadioEmptyTiny = require('./IconRadioEmptyTiny').default;\nconst IconReddit = require('./IconReddit').default;\nconst IconRedditSmall = require('./IconRedditSmall').default;\nconst IconRedditTiny = require('./IconRedditTiny').default;\nconst IconRefresh = require('./IconRefresh').default;\nconst IconRefreshSmall = require('./IconRefreshSmall').default;\nconst IconRefreshTiny = require('./IconRefreshTiny').default;\nconst IconReply = require('./IconReply').default;\nconst IconReplySmall = require('./IconReplySmall').default;\nconst IconReplyTiny = require('./IconReplyTiny').default;\nconst IconShare = require('./IconShare').default;\nconst IconShareSmall = require('./IconShareSmall').default;\nconst IconShareTiny = require('./IconShareTiny').default;\nconst IconSitemap = require('./IconSitemap').default;\nconst IconSitemapSmall = require('./IconSitemapSmall').default;\nconst IconSitemapTiny = require('./IconSitemapTiny').default;\nconst IconSound = require('./IconSound').default;\nconst IconSoundOff = require('./IconSoundOff').default;\nconst IconSoundOffSmall = require('./IconSoundOffSmall').default;\nconst IconSoundOffTiny = require('./IconSoundOffTiny').default;\nconst IconSoundSmall = require('./IconSoundSmall').default;\nconst IconSoundTiny = require('./IconSoundTiny').default;\nconst IconTag = require('./IconTag').default;\nconst IconTagSmall = require('./IconTagSmall').default;\nconst IconTagTiny = require('./IconTagTiny').default;\nconst IconText = require('./IconText').default;\nconst IconTextSmall = require('./IconTextSmall').default;\nconst IconTextTiny = require('./IconTextTiny').default;\nconst IconTrash = require('./IconTrash').default;\nconst IconTrashOpen = require('./IconTrashOpen').default;\nconst IconTrashOpenSmall = require('./IconTrashOpenSmall').default;\nconst IconTrashOpenTiny = require('./IconTrashOpenTiny').default;\nconst IconTrashSmall = require('./IconTrashSmall').default;\nconst IconTrashTiny = require('./IconTrashTiny').default;\nconst IconTumblr = require('./IconTumblr').default;\nconst IconTwitter = require('./IconTwitter').default;\nconst IconTwitterSmall = require('./IconTwitterSmall').default;\nconst IconTwitterTiny = require('./IconTwitterTiny').default;\nconst IconUnlock = require('./IconUnlock').default;\nconst IconUnlockSmall = require('./IconUnlockSmall').default;\nconst IconUnlockTiny = require('./IconUnlockTiny').default;\nconst IconUpvote = require('./IconUpvote').default;\nconst IconUpvoteSmall = require('./IconUpvoteSmall').default;\nconst IconUpvoteTiny = require('./IconUpvoteTiny').default;\nconst IconUser = require('./IconUser').default;\nconst IconUserSmall = require('./IconUserSmall').default;\nconst IconUserTiny = require('./IconUserTiny').default;\nconst IconUsers = require('./IconUsers').default;\nconst IconUsersSmall = require('./IconUsersSmall').default;\nconst IconUsersTiny = require('./IconUsersTiny').default;\nconst IconVideo = require('./IconVideo').default;\nconst IconVideoSmall = require('./IconVideoSmall').default;\nconst IconVideoTiny = require('./IconVideoTiny').default;\nconst IconVkontakte = require('./IconVkontakte').default;\nconst IconWatch = require('./IconWatch').default;\nconst IconWatchSmall = require('./IconWatchSmall').default;\nconst IconWatchTiny = require('./IconWatchTiny').default;\nconst IconWeibo = require('./IconWeibo').default;\nconst IconWykop = require('./IconWykop').default;\nconst IconYoutube = require('./IconYoutube').default;\nconst IconZoomIn = require('./IconZoomIn').default;\nconst IconZoomInSmall = require('./IconZoomInSmall').default;\nconst IconZoomInTiny = require('./IconZoomInTiny').default;\nconst IconZoomOut = require('./IconZoomOut').default;\nconst IconZoomOutSmall = require('./IconZoomOutSmall').default;\nconst IconZoomOutTiny = require('./IconZoomOutTiny').default;\n\nconst IconsDemo = styled.div`\n`;\n\nconst Icon = styled.div`\n align-items: center;\n display: flex;\n margin-bottom: 12px;\n padding: 6px;\n &:hover {\n background: #fff;\n }\n`;\n\nconst IconName = styled.div`\n flex-basis: 200px;\n font-size: 16px;\n font-weight: 600;\n margin-right: 12px;\n text-align: right;\n`;\n\nconst Variants = styled.div`\n display: grid;\n flex: 1;\n grid-template-columns: 100px 100px 100px;\n`;\n\nconst IconVariant = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: 0 12px;\n position: relative;\n &:hover span {\n display: flex;\n }\n`;\n\nconst VariantName = styled.span`\n align-items: center;\n background: #fff;\n bottom: -20px;\n display: none;\n font-size: 14px;\n height: 20px;\n justify-content: center;\n left: 0;\n position: absolute;\n right: 0;\n text-align: center;\n`;\n\nconst VariantComponent = styled.div`\n`;\n\n\n \n \n IconActivity\n \n \n \n IconActivity\n \n \n \n \n IconActivitySmall\n \n \n \n \n IconActivityTiny\n \n \n \n \n\n \n IconAdd\n \n \n \n IconAdd\n \n \n \n \n IconAddSmall\n \n \n \n \n IconAddTiny\n \n \n \n \n\n \n IconAlert\n \n \n \n IconAlert\n \n \n \n \n IconAlertSmall\n \n \n \n \n IconAlertTiny\n \n \n \n \n\n \n IconArrow\n \n \n \n IconArrow\n \n \n \n \n IconArrowSmall\n \n \n \n \n IconArrowTiny\n \n \n \n \n\n \n IconAvatar\n \n \n \n IconAvatar\n \n \n \n \n IconAvatarSmall\n \n \n \n \n IconAvatarTiny\n \n \n \n \n\n \n IconBell\n \n \n \n IconBell\n \n \n \n \n IconBellSmall\n \n \n \n \n IconBellTiny\n \n \n \n \n\n \n IconBold\n \n \n \n IconBold\n \n \n \n \n IconBoldSmall\n \n \n \n \n IconBoldTiny\n \n \n \n \n\n \n IconBoldActive\n \n \n \n IconBoldActive\n \n \n \n \n IconBoldActiveSmall\n \n \n \n \n IconBoldActiveTiny\n \n \n \n \n\n \n IconBook\n \n \n \n IconBook\n \n \n \n \n IconBookSmall\n \n \n \n \n IconBookTiny\n \n \n \n \n\n \n IconBookmark\n \n \n \n IconBookmark\n \n \n \n \n IconBookmarkSmall\n \n \n \n \n IconBookmarkTiny\n \n \n \n \n\n \n IconBubble\n \n \n \n IconBubble\n \n \n \n \n IconBubbleSmall\n \n \n \n \n IconBubbleTiny\n \n \n \n \n\n \n IconBulletList\n \n \n \n IconBulletList\n \n \n \n \n IconBulletListSmall\n \n \n \n \n IconBulletListTiny\n \n \n \n \n\n \n IconCalendar\n \n \n \n IconCalendar\n \n \n \n \n IconCalendarSmall\n \n \n \n \n IconCalendarTiny\n \n \n \n \n\n \n IconCamera\n \n \n \n IconCamera\n \n \n \n \n IconCameraSmall\n \n \n \n \n IconCameraTiny\n \n \n \n \n\n \n IconCheckbox\n \n \n \n IconCheckbox\n \n \n \n \n IconCheckboxSmall\n \n \n \n \n IconCheckboxTiny\n \n \n \n \n\n \n IconCheckboxEmpty\n \n \n \n IconCheckboxEmpty\n \n \n \n \n IconCheckboxEmptySmall\n \n \n \n \n IconCheckboxEmptyTiny\n \n \n \n \n\n \n IconCheckmark\n \n \n \n IconCheckmark\n \n \n \n \n IconCheckmarkSmall\n \n \n \n \n IconCheckmarkTiny\n \n \n \n \n\n \n IconClipboard\n \n \n \n IconClipboard\n \n \n \n \n IconClipboardSmall\n \n \n \n \n IconClipboardTiny\n \n \n \n \n\n \n IconClock\n \n \n \n IconClock\n \n \n \n \n IconClockSmall\n \n \n \n \n IconClockTiny\n \n \n \n \n\n \n IconClose\n \n \n \n IconClose\n \n \n \n \n IconCloseSmall\n \n \n \n \n IconCloseTiny\n \n \n \n \n\n \n IconComment\n \n \n \n IconComment\n \n \n \n \n IconCommentSmall\n \n \n \n \n IconCommentTiny\n \n \n \n \n\n \n IconControls\n \n \n \n IconControls\n \n \n \n \n IconControlsSmall\n \n \n \n \n IconControlsTiny\n \n \n \n \n\n \n IconCross\n \n \n \n IconCross\n \n \n \n \n IconCrossSmall\n \n \n \n \n IconCrossTiny\n \n \n \n \n\n \n IconDashboard\n \n \n \n IconDashboard\n \n \n \n \n IconDashboardSmall\n \n \n \n \n IconDashboardTiny\n \n \n \n \n\n \n IconDiscord\n \n \n \n IconDiscord\n \n \n \n \n\n \n IconDownload\n \n \n \n IconDownload\n \n \n \n \n IconDownloadSmall\n \n \n \n \n IconDownloadTiny\n \n \n \n \n\n \n IconDropdown\n \n \n \n IconDropdown\n \n \n \n \n IconDropdownSmall\n \n \n \n \n IconDropdownTiny\n \n \n \n \n\n \n IconEnvelope\n \n \n \n IconEnvelope\n \n \n \n \n IconEnvelopeSmall\n \n \n \n \n IconEnvelopeTiny\n \n \n \n \n\n \n IconError\n \n \n \n IconError\n \n \n \n \n IconErrorSmall\n \n \n \n \n IconErrorTiny\n \n \n \n \n\n \n IconExternal\n \n \n \n IconExternal\n \n \n \n \n IconExternalSmall\n \n \n \n \n IconExternalTiny\n \n \n \n \n\n \n IconEye\n \n \n \n IconEye\n \n \n \n \n IconEyeSmall\n \n \n \n \n IconEyeTiny\n \n \n \n \n\n \n IconEyeCrossed\n \n \n \n IconEyeCrossed\n \n \n \n \n IconEyeCrossedSmall\n \n \n \n \n IconEyeCrossedTiny\n \n \n \n \n\n \n IconFacebook\n \n \n \n IconFacebook\n \n \n \n \n IconFacebookSmall\n \n \n \n \n IconFacebookTiny\n \n \n \n \n\n \n IconFandom\n \n \n \n IconFandom\n \n \n \n \n IconFandomSmall\n \n \n \n \n IconFandomTiny\n \n \n \n \n\n \n IconFlag\n \n \n \n IconFlag\n \n \n \n \n IconFlagSmall\n \n \n \n \n IconFlagTiny\n \n \n \n \n\n \n IconFootnote\n \n \n \n IconFootnote\n \n \n \n \n IconFootnoteSmall\n \n \n \n \n IconFootnoteTiny\n \n \n \n \n\n \n IconGear\n \n \n \n IconGear\n \n \n \n \n IconGearSmall\n \n \n \n \n IconGearTiny\n \n \n \n \n\n \n IconGoogleplus\n \n \n \n IconGoogleplus\n \n \n \n \n\n \n IconGrid\n \n \n \n IconGrid\n \n \n \n \n IconGridSmall\n \n \n \n \n IconGridTiny\n \n \n \n \n\n \n IconGripper\n \n \n \n IconGripper\n \n \n \n \n IconGripperSmall\n \n \n \n \n IconGripperTiny\n \n \n \n \n\n \n IconH2\n \n \n \n IconH2\n \n \n \n \n IconH2Small\n \n \n \n \n IconH2Tiny\n \n \n \n \n\n \n IconH3\n \n \n \n IconH3\n \n \n \n \n IconH3Small\n \n \n \n \n IconH3Tiny\n \n \n \n \n\n \n IconHeart\n \n \n \n IconHeart\n \n \n \n \n IconHeartSmall\n \n \n \n \n IconHeartTiny\n \n \n \n \n\n \n IconHeartFilled\n \n \n \n IconHeartFilled\n \n \n \n \n IconHeartFilledSmall\n \n \n \n \n IconHeartFilledTiny\n \n \n \n \n\n \n IconHome\n \n \n \n IconHome\n \n \n \n \n IconHomeSmall\n \n \n \n \n IconHomeTiny\n \n \n \n \n\n \n IconImage\n \n \n \n IconImage\n \n \n \n \n IconImageSmall\n \n \n \n \n IconImageTiny\n \n \n \n \n\n \n IconImages\n \n \n \n IconImages\n \n \n \n \n IconImagesSmall\n \n \n \n \n IconImagesTiny\n \n \n \n \n\n \n IconIndentLeft\n \n \n \n IconIndentLeft\n \n \n \n \n IconIndentLeftSmall\n \n \n \n \n IconIndentLeftTiny\n \n \n \n \n\n \n IconIndentRight\n \n \n \n IconIndentRight\n \n \n \n \n IconIndentRightSmall\n \n \n \n \n IconIndentRightTiny\n \n \n \n \n\n \n IconInstagram\n \n \n \n IconInstagram\n \n \n \n \n\n \n IconItalics\n \n \n \n IconItalics\n \n \n \n \n IconItalicsSmall\n \n \n \n \n IconItalicsTiny\n \n \n \n \n\n \n IconLeftAlign\n \n \n \n IconLeftAlign\n \n \n \n \n IconLeftAlignSmall\n \n \n \n \n IconLeftAlignTiny\n \n \n \n \n\n \n IconLine\n \n \n \n IconLine\n \n \n \n \n\n \n IconLink\n \n \n \n IconLink\n \n \n \n \n IconLinkSmall\n \n \n \n \n IconLinkTiny\n \n \n \n \n\n \n IconLinkedin\n \n \n \n IconLinkedin\n \n \n \n \n\n \n IconLoading\n \n \n \n IconLoading\n \n \n \n \n\n \n IconLock\n \n \n \n IconLock\n \n \n \n \n IconLockSmall\n \n \n \n \n IconLockTiny\n \n \n \n \n\n \n IconMagnifyingGlass\n \n \n \n IconMagnifyingGlass\n \n \n \n \n IconMagnifyingGlassSmall\n \n \n \n \n IconMagnifyingGlassTiny\n \n \n \n \n\n \n IconMap\n \n \n \n IconMap\n \n \n \n \n IconMapSmall\n \n \n \n \n IconMapTiny\n \n \n \n \n\n \n IconMeneame\n \n \n \n IconMeneame\n \n \n \n \n\n \n IconMenu\n \n \n \n IconMenu\n \n \n \n \n IconMenuSmall\n \n \n \n \n IconMenuTiny\n \n \n \n \n\n \n IconMenuControl\n \n \n \n IconMenuControl\n \n \n \n \n IconMenuControlSmall\n \n \n \n \n IconMenuControlTiny\n \n \n \n \n\n \n IconMessage\n \n \n \n IconMessage\n \n \n \n \n IconMessageSmall\n \n \n \n \n IconMessageTiny\n \n \n \n \n\n \n IconMore\n \n \n \n IconMore\n \n \n \n \n IconMoreSmall\n \n \n \n \n IconMoreTiny\n \n \n \n \n\n \n IconNk\n \n \n \n IconNk\n \n \n \n \n\n \n IconNumberedList\n \n \n \n IconNumberedList\n \n \n \n \n IconNumberedListSmall\n \n \n \n \n IconNumberedListTiny\n \n \n \n \n\n \n IconOdnoklassniki\n \n \n \n IconOdnoklassniki\n \n \n \n \n\n \n IconPage\n \n \n \n IconPage\n \n \n \n \n IconPageSmall\n \n \n \n \n IconPageTiny\n \n \n \n \n\n \n IconPageList\n \n \n \n IconPageList\n \n \n \n \n IconPageListSmall\n \n \n \n \n IconPageListTiny\n \n \n \n \n\n \n IconPages\n \n \n \n IconPages\n \n \n \n \n IconPagesSmall\n \n \n \n \n IconPagesTiny\n \n \n \n \n\n \n IconParagraph\n \n \n \n IconParagraph\n \n \n \n \n IconParagraphSmall\n \n \n \n \n IconParagraphTiny\n \n \n \n \n\n \n IconPause\n \n \n \n IconPause\n \n \n \n \n IconPauseSmall\n \n \n \n \n IconPauseTiny\n \n \n \n \n\n \n IconPencil\n \n \n \n IconPencil\n \n \n \n \n IconPencilSmall\n \n \n \n \n IconPencilTiny\n \n \n \n \n\n \n IconPin\n \n \n \n IconPin\n \n \n \n \n IconPinSmall\n \n \n \n \n IconPinTiny\n \n \n \n \n\n \n IconPlay\n \n \n \n IconPlay\n \n \n \n \n IconPlaySmall\n \n \n \n \n IconPlayTiny\n \n \n \n \n\n \n IconPoll\n \n \n \n IconPoll\n \n \n \n \n IconPollSmall\n \n \n \n \n IconPollTiny\n \n \n \n \n\n \n IconPreformat\n \n \n \n IconPreformat\n \n \n \n \n IconPreformatSmall\n \n \n \n \n IconPreformatTiny\n \n \n \n \n\n \n IconQuestion\n \n \n \n IconQuestion\n \n \n \n \n IconQuestionSmall\n \n \n \n \n IconQuestionTiny\n \n \n \n \n\n \n IconQuiz\n \n \n \n IconQuiz\n \n \n \n \n IconQuizSmall\n \n \n \n \n IconQuizTiny\n \n \n \n \n\n \n IconQuote\n \n \n \n IconQuote\n \n \n \n \n IconQuoteSmall\n \n \n \n \n IconQuoteTiny\n \n \n \n \n\n \n IconQzone\n \n \n \n IconQzone\n \n \n \n \n\n \n IconRadioActive\n \n \n \n IconRadioActive\n \n \n \n \n IconRadioActiveSmall\n \n \n \n \n IconRadioActiveTiny\n \n \n \n \n\n \n IconRadioEmpty\n \n \n \n IconRadioEmpty\n \n \n \n \n IconRadioEmptySmall\n \n \n \n \n IconRadioEmptyTiny\n \n \n \n \n\n \n IconReddit\n \n \n \n IconReddit\n \n \n \n \n IconRedditSmall\n \n \n \n \n IconRedditTiny\n \n \n \n \n\n \n IconRefresh\n \n \n \n IconRefresh\n \n \n \n \n IconRefreshSmall\n \n \n \n \n IconRefreshTiny\n \n \n \n \n\n \n IconReply\n \n \n \n IconReply\n \n \n \n \n IconReplySmall\n \n \n \n \n IconReplyTiny\n \n \n \n \n\n \n IconShare\n \n \n \n IconShare\n \n \n \n \n IconShareSmall\n \n \n \n \n IconShareTiny\n \n \n \n \n\n \n IconSitemap\n \n \n \n IconSitemap\n \n \n \n \n IconSitemapSmall\n \n \n \n \n IconSitemapTiny\n \n \n \n \n\n \n IconSound\n \n \n \n IconSound\n \n \n \n \n IconSoundSmall\n \n \n \n \n IconSoundTiny\n \n \n \n \n\n \n IconSoundOff\n \n \n \n IconSoundOff\n \n \n \n \n IconSoundOffSmall\n \n \n \n \n IconSoundOffTiny\n \n \n \n \n\n \n IconTag\n \n \n \n IconTag\n \n \n \n \n IconTagSmall\n \n \n \n \n IconTagTiny\n \n \n \n \n\n \n IconText\n \n \n \n IconText\n \n \n \n \n IconTextSmall\n \n \n \n \n IconTextTiny\n \n \n \n \n\n \n IconTrash\n \n \n \n IconTrash\n \n \n \n \n IconTrashSmall\n \n \n \n \n IconTrashTiny\n \n \n \n \n\n \n IconTrashOpen\n \n \n \n IconTrashOpen\n \n \n \n \n IconTrashOpenSmall\n \n \n \n \n IconTrashOpenTiny\n \n \n \n \n\n \n IconTumblr\n \n \n \n IconTumblr\n \n \n \n \n\n \n IconTwitter\n \n \n \n IconTwitter\n \n \n \n \n IconTwitterSmall\n \n \n \n \n IconTwitterTiny\n \n \n \n \n\n \n IconUnlock\n \n \n \n IconUnlock\n \n \n \n \n IconUnlockSmall\n \n \n \n \n IconUnlockTiny\n \n \n \n \n\n \n IconUpvote\n \n \n \n IconUpvote\n \n \n \n \n IconUpvoteSmall\n \n \n \n \n IconUpvoteTiny\n \n \n \n \n\n \n IconUser\n \n \n \n IconUser\n \n \n \n \n IconUserSmall\n \n \n \n \n IconUserTiny\n \n \n \n \n\n \n IconUsers\n \n \n \n IconUsers\n \n \n \n \n IconUsersSmall\n \n \n \n \n IconUsersTiny\n \n \n \n \n\n \n IconVideo\n \n \n \n IconVideo\n \n \n \n \n IconVideoSmall\n \n \n \n \n IconVideoTiny\n \n \n \n \n\n \n IconVkontakte\n \n \n \n IconVkontakte\n \n \n \n \n\n \n IconWatch\n \n \n \n IconWatch\n \n \n \n \n IconWatchSmall\n \n \n \n \n IconWatchTiny\n \n \n \n \n\n \n IconWeibo\n \n \n \n IconWeibo\n \n \n \n \n\n \n IconWykop\n \n \n \n IconWykop\n \n \n \n \n\n \n IconYoutube\n \n \n \n IconYoutube\n \n \n \n \n\n \n IconZoomIn\n \n \n \n IconZoomIn\n \n \n \n \n IconZoomInSmall\n \n \n \n \n IconZoomInTiny\n \n \n \n \n\n \n IconZoomOut\n \n \n \n IconZoomOut\n \n \n \n \n IconZoomOutSmall\n \n \n \n \n IconZoomOutTiny\n \n \n \n \n",settings:{noeditor:!0},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeAdmin",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(660)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeContentModerator",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(662)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeDiscussionModerator",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(664)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeGlobalDiscussionsModerator",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(666)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeHelper",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(668)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeStaff",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(670)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"AvatarBadgeVstf",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(672)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoFandom",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(674)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoFandomHeart",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(676)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoFandomWhite",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(678)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoWikia",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(680)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoWikiaOrg",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(682)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"LogoWikiaOrgWhite",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(684)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"StoreAppstore",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(686)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"\n",methods:[],displayName:"StoreGoogleplay",doclets:{component:!0},tags:{component:[{title:"component",description:null}]},examples:n(688)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"code",content:'',settings:{},evalInContext:o}]},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a);n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:'This is system that controlls the state of site notifications, allows to add them via actions, and outputs them to a component.\n\nIt supports plaintext messages and automatically handles dismissing actions when the ⨯ icon is clicked on the notification.\n\n## Requirements\n\nThe BannerNotification system requires:\n\n- `redux` (and `react-redux`)\n- `immutable`\n\n## Installation\n\nThere are few parts that need to be plugged into place:\n\n### Reducer\n\nThe reducer/store need to be included in Redux.\n\nExample:\n\n```js\nimport { BannerNotificationsStore } from \'@wikia/react-common/systems/BannerNotifications\';\nimport { combineReducers } from \'redux\';\n\nconst rootReducer = combineReducers({\n BannerNotificationsStore,\n});\n\nexport default rootReducer;\n```\n\n### Component\n\nThe component that connects to the Redux state needs to be included on the page somewhere so the notifications are visible.\n\n```js\nimport React from \'react\';\nimport PropTypes from \'prop-types\';\nimport FandomContentWell from \'@wikia/react-common/components/FandomContentWell\';\nimport { BannerNotificationsComponent } from \'@wikia/react-common/systems/BannerNotifications\';\n\nclass PageLayout extends React.Component {\n static propTypes = {\n children: PropTypes.node.isRequired,\n }\n\n render() {\n return (\n <FandomContentWell>\n <BannerNotificationsComponent />\n {children}\n </FandomContentWell>\n );\n }\n}\n\nexport default PageLayout;\n```\n\n**NOTE**: Remember to also include styles!\n\n```css\n@import "~@wikia/react-common/systems/BannerNotifications.css";\n```\n\n## API\n\nBannerNotifications system exports few actions that should be used to add new notifications:\n\n- `addAlert(text, [id])`\n- `addWarning(text, [id])`\n- `addSuccess(text, [id])`\n- `addMessage(text, [id])`\n\nThe `id` is optional and it\'s needed only when the notification needs to be manually removed with `removeNotfication(id)` action. If omitted its value is assigned automatically.\n\nTypes of notifications are shown in [components/BannerNotification](https://wikia.github.io/react-common/#bannernotification) section.\n\nExample usage in thunk:\n\n```js\nimport axios from \'axios\';\nimport { addAlert } from \'@wikia/react-common/systems/BannerNotifications\';\n\nexport const loadData = () => (\n async dispatch => {\n try {\n const response = await axios({\n method: \'get\',\n url: `/api/get-data`,\n });\n //...\n } catch (error) {\n dispatch(addAlert(\'Error loading data from the server\'));\n console.error(error);\n }\n }\n);\n```'}]},function(e,t,n){var a=n(691),r=n(692),o={};for(var i in a)a.hasOwnProperty(i)&&(o[a[i]]=i);var s=e.exports={to:{},get:{}};function clamp(e,t,n){return Math.min(Math.max(t,e),n)}function hexDouble(e){var t=e.toString(16).toUpperCase();return t.length<2?"0"+t:t}s.get=function(e){var t,n;switch(e.substring(0,3).toLowerCase()){case"hsl":t=s.get.hsl(e),n="hsl";break;case"hwb":t=s.get.hwb(e),n="hwb";break;default:t=s.get.rgb(e),n="rgb"}return t?{model:n,value:t}:null},s.get.rgb=function(e){if(!e)return null;var t,n,r,o=[0,0,0,1];if(t=e.match(/^#([a-f0-9]{6})([a-f0-9]{2})?$/i)){for(r=t[2],t=t[1],n=0;n<3;n++){var i=2*n;o[n]=parseInt(t.slice(i,i+2),16)}r&&(o[3]=Math.round(parseInt(r,16)/255*100)/100)}else if(t=e.match(/^#([a-f0-9]{3,4})$/i)){for(r=(t=t[1])[3],n=0;n<3;n++)o[n]=parseInt(t[n]+t[n],16);r&&(o[3]=Math.round(parseInt(r+r,16)/255*100)/100)}else if(t=e.match(/^rgba?\(\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*,\s*([+-]?\d+)\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/)){for(n=0;n<3;n++)o[n]=parseInt(t[n+1],0);t[4]&&(o[3]=parseFloat(t[4]))}else{if(!(t=e.match(/^rgba?\(\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*,\s*([+-]?[\d\.]+)\%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/)))return(t=e.match(/(\D+)/))?"transparent"===t[1]?[0,0,0,0]:(o=a[t[1]])?(o[3]=1,o):null:null;for(n=0;n<3;n++)o[n]=Math.round(2.55*parseFloat(t[n+1]));t[4]&&(o[3]=parseFloat(t[4]))}for(n=0;n<3;n++)o[n]=clamp(o[n],0,255);return o[3]=clamp(o[3],0,1),o},s.get.hsl=function(e){if(!e)return null;var t=e.match(/^hsla?\(\s*([+-]?(?:\d*\.)?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/);if(t){var n=parseFloat(t[4]);return[(parseFloat(t[1])+360)%360,clamp(parseFloat(t[2]),0,100),clamp(parseFloat(t[3]),0,100),clamp(isNaN(n)?1:n,0,1)]}return null},s.get.hwb=function(e){if(!e)return null;var t=e.match(/^hwb\(\s*([+-]?\d*[\.]?\d+)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?[\d\.]+)\s*)?\)$/);if(t){var n=parseFloat(t[4]);return[(parseFloat(t[1])%360+360)%360,clamp(parseFloat(t[2]),0,100),clamp(parseFloat(t[3]),0,100),clamp(isNaN(n)?1:n,0,1)]}return null},s.to.hex=function(){var e=r(arguments);return"#"+hexDouble(e[0])+hexDouble(e[1])+hexDouble(e[2])+(e[3]<1?hexDouble(Math.round(255*e[3])):"")},s.to.rgb=function(){var e=r(arguments);return e.length<4||1===e[3]?"rgb("+Math.round(e[0])+", "+Math.round(e[1])+", "+Math.round(e[2])+")":"rgba("+Math.round(e[0])+", "+Math.round(e[1])+", "+Math.round(e[2])+", "+e[3]+")"},s.to.rgb.percent=function(){var e=r(arguments),t=Math.round(e[0]/255*100),n=Math.round(e[1]/255*100),a=Math.round(e[2]/255*100);return e.length<4||1===e[3]?"rgb("+t+"%, "+n+"%, "+a+"%)":"rgba("+t+"%, "+n+"%, "+a+"%, "+e[3]+")"},s.to.hsl=function(){var e=r(arguments);return e.length<4||1===e[3]?"hsl("+e[0]+", "+e[1]+"%, "+e[2]+"%)":"hsla("+e[0]+", "+e[1]+"%, "+e[2]+"%, "+e[3]+")"},s.to.hwb=function(){var e=r(arguments),t="";return e.length>=4&&1!==e[3]&&(t=", "+e[3]),"hwb("+e[0]+", "+e[1]+"%, "+e[2]+"%"+t+")"},s.to.keyword=function(e){return o[e.slice(0,3)]}},function(e,t,n){"use strict";e.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}},function(e,t,n){"use strict";var a=n(693),r=Array.prototype.concat,o=Array.prototype.slice,i=e.exports=function swizzle(e){for(var t=[],n=0,i=e.length;n=0&&(e.splice instanceof Function||Object.getOwnPropertyDescriptor(e,e.length-1)&&"String"!==e.constructor.name))}},function(e,t,n){var a=n(454),r=n(696),o={};function wrapRaw(e){var t=function(t){return null==t?t:(arguments.length>1&&(t=Array.prototype.slice.call(arguments)),e(t))};return"conversion"in e&&(t.conversion=e.conversion),t}function wrapRounded(e){var t=function(t){if(null==t)return t;arguments.length>1&&(t=Array.prototype.slice.call(arguments));var n=e(t);if("object"==typeof n)for(var a=n.length,r=0;rinterface Tag {\n articleId: string;\n articleTitle: string;\n url?: string;\n}\n```\n',displayName:"StyledArticleTagsSelector",methods:[],props:[{type:{name:"string"},required:!0,description:"Name of the current community",tags:{},name:"communityName"},{type:{name:"func"},required:!0,description:'Callback called when clicking on tags in the "Add Tag" dropdown; `(id: string) => void`',tags:{},name:"onAddTag"},{type:{name:"func"},required:!0,description:"Callback called when clicking on X in the current tags list; `(id: string) => void`",tags:{},name:"onRemoveTag"},{type:{name:"func"},required:!0,description:"Callback called when search should be called; `(query: string) => void`",tags:{},name:"onSearch"},{type:{name:"func"},required:!0,description:"Callback called when clicking on one of the suggested tags; `(id: string) => void`",tags:{},name:"onSuggestedTag"},{type:{name:"string"},required:!1,description:"Accent color",defaultValue:{value:"COLORS.fandom_aqua",computed:!0},tags:{},name:"accentColor"},{type:{name:"string"},required:!1,description:"Extra class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"number"},required:!1,description:"How many tags are allowed",defaultValue:{value:"10",computed:!1},tags:{},name:"maxAllowed"},{type:{name:"func"},required:!1,description:"Callback called when search is opened/shown",defaultValue:{value:"noop",computed:!0},tags:{},name:"onOpenSearch"},{type:{name:"arrayOf",value:{name:"custom",raw:"TagShape"}},required:!1,description:"Search result tags; `Tag[]` (see above); current query will automatically be highlighted",defaultValue:{value:"null",computed:!1},tags:{},name:"searchResults"},{type:{name:"arrayOf",value:{name:"custom",raw:"TagShape"}},required:!1,description:"Suggested tags; `Tag[]` (see above)",defaultValue:{value:"null",computed:!1},tags:{},name:"suggestedTags"},{type:{name:"arrayOf",value:{name:"custom",raw:"TagShape"}},required:!1,description:"Current tags; `Tag[]` (see above)",defaultValue:{value:"null",computed:!1},tags:{},name:"tags"}],doclets:{},tags:{},examples:n(698)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Non-empty state:"},{type:"code",content:" console.log('onSearch', q)}\n onAddTag={(tag) => console.log('onAddTag', tag)}\n onRemoveTag={(tag) => console.log('onRemoveTag', tag)}\n onSuggestedTag={(tag) => console.log('onSuggestedTag', tag)}\n/>",settings:{},evalInContext:o},{type:"markdown",content:"Empty state:"},{type:"code",content:" console.log('onSearch', q)}\n onAddTag={(tag) => console.log('onAddTag', tag)}\n onRemoveTag={(tag) => console.log('onRemoveTag', tag)}\n onSuggestedTag={(tag) => console.log('onSuggestedTag', tag)}\n/>",settings:{},evalInContext:o},{type:"markdown",content:"Too many tags state:"},{type:"code",content:" console.log('onSearch', q)}\n onAddTag={(tag) => console.log('onAddTag', tag)}\n onRemoveTag={(tag) => console.log('onRemoveTag', tag)}\n onSuggestedTag={(tag) => console.log('onSuggestedTag', tag)}\n/>",settings:{},evalInContext:o}]},function(e,t,n){var a=n(700);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-avatar {\n display: inline-block;\n position: relative; }\n .wds-avatar a {\n height: 100%;\n width: 100%; }\n\n.wds-avatar__image {\n height: 100%;\n min-width: 100%;\n width: 100%;\n display: inline-block;\n border-radius: 50%;\n box-sizing: border-box; }\n\n.wds-avatar__badge {\n line-height: 0;\n position: absolute; }\n .wds-avatar__badge svg {\n height: 100%;\n min-width: 100%;\n width: 100%; }\n\n.wds-avatar {\n height: 48px;\n min-width: 48px;\n width: 48px; }\n .wds-avatar a {\n color: #bed1cf; }\n .wds-avatar a:hover {\n color: #bed1cf; }\n .wds-avatar .wds-avatar__image {\n background-color: #fff;\n fill: #bed1cf; }\n .wds-avatar .wds-avatar__image:hover {\n fill: #bed1cf; }\n .wds-avatar img.wds-avatar__image {\n border: solid 3px #bed1cf; }\n .wds-avatar img.wds-avatar__image:hover {\n border-color: #bed1cf; }\n .wds-avatar .wds-avatar__badge {\n height: 20.1872px;\n min-width: 20.1872px;\n width: 20.1872px;\n left: -4.48604px;\n top: -5.76777px; }\n",""])},function(e,t,n){e.exports={description:"",displayName:"Avatar",methods:[],props:[{type:{name:"string"},required:!1,description:"Alt text for avatar",defaultValue:{value:"'User avatar'",computed:!1},tags:{},name:"alt"},{type:{name:"enum",value:[{value:"'content-moderator'",computed:!1},{value:"'discussion-moderator'",computed:!1},{value:"'sysop'",computed:!1},{value:"'global-discussions-moderator'",computed:!1},{value:"'helper'",computed:!1},{value:"'staff'",computed:!1},{value:"'vstf'",computed:!1},{value:"''",computed:!1}]},required:!1,description:"Badge to display for avatar.",defaultValue:{value:"undefined",computed:!0},tags:{},name:"badge"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"undefined",computed:!0},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"Link to user's profile",defaultValue:{value:"undefined",computed:!0},tags:{},name:"href"},{type:{name:"func"},required:!1,description:"Function which returns wrapped AvatarImage, accepts one argument avatarImage which provides the actual avatar image",defaultValue:{value:"undefined",computed:!0},tags:{},name:"linkBuilder"},{type:{name:"string"},required:!1,description:"Image src for avatar",defaultValue:{value:"undefined",computed:!0},tags:{},name:"src"},{type:{name:"string"},required:!1,description:"Title attribute for avatar",defaultValue:{value:"undefined",computed:!0},tags:{},name:"title"},{type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1,description:"Optional user ID to fetch avatar for, if `src` prop is not provided",defaultValue:{value:"undefined",computed:!0},tags:{},name:"userId"}],doclets:{},examples:n(702)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:'
\n \n (\n \n {avatarImage}\n \n )}\n />\n \n
',settings:{},evalInContext:o},{type:"markdown",content:"Avatar with badges"},{type:"code",content:'
\n \n \n \n \n \n \n \n
',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"A `styled-component` version of Avatar component\n",displayName:"StyledAvatar",methods:[],props:[{type:{name:"string"},required:!1,description:"Alt text for avatar",defaultValue:{value:"'User avatar'",computed:!1},tags:{},name:"alt"},{type:{name:"enum",value:[{value:"'content-moderator'",computed:!1},{value:"'discussion-moderator'",computed:!1},{value:"'sysop'",computed:!1},{value:"'global-discussions-moderator'",computed:!1},{value:"'helper'",computed:!1},{value:"'staff'",computed:!1},{value:"'vstf'",computed:!1},{value:"''",computed:!1}]},required:!1,description:"Badge to display for avatar.",defaultValue:{value:"undefined",computed:!0},tags:{},name:"badge"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"undefined",computed:!0},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"Link to user's profile",defaultValue:{value:"undefined",computed:!0},tags:{},name:"href"},{type:{name:"func"},required:!1,description:"Function that returns wrapped avatar image, accepts one argument avatarImage which provides the actual avatar image",defaultValue:{value:"undefined",computed:!0},tags:{},name:"linkBuilder"},{type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1,description:"Size of avatar in px",defaultValue:{value:"48",computed:!1},tags:{},name:"size"},{type:{name:"string"},required:!1,description:"Image src for avatar",defaultValue:{value:"undefined",computed:!0},tags:{},name:"src"},{type:{name:"string"},required:!1,description:"Title attribute for avatar",defaultValue:{value:"undefined",computed:!0},tags:{},name:"title"},{type:{name:"union",value:[{name:"string"},{name:"number"}]},required:!1,description:"Optional user ID to fetch avatar for, if `src` prop is not provided",defaultValue:{value:"undefined",computed:!0},tags:{},name:"userId"}],doclets:{},tags:{},examples:n(704)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:'
\n \n \n \n (\n \n {avatarImage}\n \n )}\n />\n
',settings:{},evalInContext:o},{type:"markdown",content:"Different sizes:"},{type:"code",content:'
\n \n \n \n \n \n \n
',settings:{},evalInContext:o},{type:"markdown",content:"With hover effect:"},{type:"code",content:'
\n \n \n
',settings:{},evalInContext:o},{type:"markdown",content:"Avatar with badges"},{type:"code",content:'
\n \n \n \n \n \n \n \n
',settings:{},evalInContext:o}]},function(e,t,n){var a=n(706);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-avatar-stack {\n align-items: center;\n display: flex;\n margin: 8px 18px 6px 40px; }\n .wds-avatar-stack__overflow {\n border: 0;\n font-size: 12px;\n padding-left: 6px;\n width: auto; }\n .wds-avatar-stack .wds-avatar:nth-child(1) {\n position: relative;\n z-index: 6; }\n .wds-avatar-stack .wds-avatar:nth-child(2) {\n position: relative;\n z-index: 5;\n margin-left: -10px; }\n .wds-avatar-stack .wds-avatar:nth-child(3) {\n position: relative;\n z-index: 4;\n margin-left: -10px; }\n .wds-avatar-stack .wds-avatar:nth-child(4) {\n position: relative;\n z-index: 3;\n margin-left: -10px; }\n .wds-avatar-stack .wds-avatar:nth-child(5) {\n position: relative;\n z-index: 2;\n margin-left: -10px; }\n .wds-avatar-stack .wds-avatar:nth-child(6) {\n position: relative;\n z-index: 1;\n margin-left: -10px; }\n",""])},function(e,t,n){e.exports={description:"",displayName:"AvatarStack",methods:[],props:[{type:{name:"arrayOf",value:{name:"shape",value:"",computed:!0}},required:!0,description:"",tags:{},name:"avatars"},{type:{name:"string"},required:!1,description:"",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"",defaultValue:{value:"false",computed:!1},tags:{},name:"hideOverflow"},{type:{name:"number"},required:!1,description:"",defaultValue:{value:"5",computed:!1},tags:{},name:"maxStackSize"},{type:{name:"number"},required:!1,description:"",defaultValue:{value:"0",computed:!1},tags:{},name:"overrideCount"}],doclets:{},examples:n(708)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"With maxStackSize"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"With hidden overflow"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"With overridden counter"},{type:"code",content:"",settings:{},evalInContext:o}]},function(e,t,n){var a=n(710);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-banner-notification {\n background-color: #fff;\n color: #999;\n display: flex;\n transition: opacity 0.4s; }\n .wds-banner-notification.wds-is-transparent {\n opacity: 0; }\n .wds-banner-notification__container {\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2); }\n .wds-banner-notification__icon {\n align-items: center;\n color: #fff;\n display: flex;\n justify-content: center;\n width: 48px; }\n .wds-alert .wds-banner-notification__icon {\n background-color: #e81a3f; }\n .wds-warning .wds-banner-notification__icon {\n background-color: #de5e33; }\n .wds-success .wds-banner-notification__icon {\n background-color: #018c30; }\n .wds-message .wds-banner-notification__icon {\n background-color: #008c8f; }\n .wds-banner-notification__text {\n color: #666;\n flex: 1;\n font-size: 14px;\n line-height: 1.29;\n padding: 13px 12px; }\n .wds-banner-notification__close {\n box-sizing: content-box;\n cursor: pointer;\n padding: 18px; }\n .wds-banner-notification + .wds-banner-notification .wds-banner-notification__close,\n .wds-banner-notification + .wds-banner-notification .wds-banner-notification__text {\n border-top: 1px solid #ccc; }\n\n.wds-banner-notification__close {\n fill: currentColor;\n height: 12px;\n width: 12px; }\n\n.wds-banner-notification__icon-mark {\n fill: currentColor;\n height: 18px;\n width: 18px; }\n",""])},function(e,t,n){e.exports={description:"This is a single component used in `BannerNotifications` component.\n",displayName:"BannerNotification",methods:[],props:[{type:{name:"enum",value:[{value:"'alert'",computed:!1},{value:"'warning'",computed:!1},{value:"'success'",computed:!1},{value:"'message'",computed:!1}]},required:!0,description:"",tags:{},name:"type"},{type:{name:"node"},required:!1,description:"Children to display",defaultValue:{value:"null",computed:!1},tags:{},name:"children"},{type:{name:"string"},required:!1,description:"An additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"",defaultValue:{value:"''",computed:!1},tags:{},name:"markup"},{type:{name:"func"},required:!1,description:"",defaultValue:{value:"null",computed:!1},tags:{},name:"onClose"},{type:{name:"string"},required:!1,description:"Text to display if there are no children.",defaultValue:{value:"''",computed:!1},tags:{},name:"text"}],doclets:{},tags:{},examples:n(712)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"By default its rendered without close button:"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"But it can be rendered with close buttton:"},{type:"code",content:" alert('Click')} />",settings:{},evalInContext:o},{type:"markdown",content:"Or with extra HTML:"},{type:"code",content:" alert('Click')}>\n This is a text with a link\n",settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"Component used to create notifications. For full functionality it needs some\napp logic to handle the array of messages - adding/removing.\n\nSee the following:\n\n- [https://github.com/Wikia/f2/blob/master/frontend/react-app/curationTools/containers/Notifications.jsx](https://github.com/Wikia/f2/blob/master/frontend/react-app/curationTools/containers/Notifications.jsx \"https://github.com/Wikia/f2/blob/master/frontend/react-app/curationTools/containers/Notifications.jsx\")\n- [https://github.com/Wikia/f2/tree/master/frontend/react-app/curationTools/reducers/notifications](https://github.com/Wikia/f2/tree/master/frontend/react-app/curationTools/reducers/notifications \"https://github.com/Wikia/f2/tree/master/frontend/react-app/curationTools/reducers/notifications\")\n\nThe `messages` prop is an array of `bannerNotificationsMessageType` objects with the following props:\n\n- `id`: unique string that's send as the param of the `onClose` function\n- `type`: one of: `'alert'`, `'warning'`, `'success'` or `'message'`.\n- `text`: text that is going to be displayed on the notification\n- `permanent`: a boolean flag - if present the close button won't be displayed on the notification\n\n`bannerNotificationsMessageType` is exported along with `BannerNotification`\n",displayName:"BannerNotifications",methods:[],props:[{type:{name:"arrayOf",value:{name:"custom",raw:"messageType"}},required:!0,description:"An array of `bannerNotificationsMessageType` objects",tags:{},name:"messages"},{type:{name:"func"},required:!0,description:"Action invoked when close button is clicked",tags:{},name:"onClose"},{type:{name:"string"},required:!1,description:"An additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(714)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"By default it renders nothing:"},{type:"code",content:" {}}/>",settings:{},evalInContext:o},{type:"markdown",content:"But with proper data it can display all the messages:"},{type:"code",content:"const messages4 = [\n {\n type: 'message',\n text: 'this is a permanent message',\n id: '1',\n permanent: true,\n },\n {\n type: 'success',\n text: 'this is a success',\n id: '2',\n },\n {\n type: 'warning',\n text: 'this is a warning',\n id: '3',\n },\n {\n type: 'alert',\n text: 'this is an alert',\n id: '4',\n },\n];
\n\t {}} />\n
",settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"Basic button component\n",displayName:"Button",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"Disabled attribute for the `",settings:{},evalInContext:o},{type:"markdown",content:"Different styles:"},{type:"code",content:"
\n\t\n\t\n\t\n\t\n\t\n\t\n
",settings:{},evalInContext:o},{type:"markdown",content:"Full width:"},{type:"code",content:"",settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"Button group component\n",displayName:"ButtonGroup",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(718)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Regular buttons:"},{type:"code",content:"\n\t\n\t\n\t\n\t\n",settings:{},evalInContext:o},{type:"markdown",content:"Secondary buttons:"},{type:"code",content:"\n\t\n\t\n\t\n\t\n",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o),s=n(6),l=n.n(s),c=n(104),u=n.n(c),d=n(69),p=n(68),h=n(76);n(720);function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(e){return typeof e}:function _typeof(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n\n setState({checkbox1: !state.checkbox1})}>Default checkbox\n setState({checkbox2: !state.checkbox2})}>Extra className\n',settings:{},evalInContext:o},{type:"markdown",content:"Disabled checkbox:"},{type:"code",content:"initialState = {\n checkbox3: false,\n checkbox4: true,\n};\n\n
\n setState({checkbox3: !state.checkbox3})}>Disabled unchecked checkbox\n setState({checkbox4: !state.checkbox4})}>Disabled checked checkbox\n
",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(725);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function ContentWell(e){var t=e.className,n=e.children,a=_objectWithoutProperties(e,["className","children"]);return r.a.createElement("div",_extends({className:"wds-content-well ".concat(t)},a),n)};s.propTypes={children:i.a.node,className:i.a.string},s.defaultProps={children:null,className:""},t.default=s},function(e,t,n){var a=n(726);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-content-well {\n box-sizing: border-box; }\n @media only screen and (max-width: 767px) {\n .wds-content-well {\n margin: 0 18px; } }\n @media only screen and (min-width: 768px) {\n .wds-content-well {\n margin: 0 auto; } }\n @media only screen and (min-width: 768px) and (max-width: 1023px) {\n .wds-content-well {\n width: 732px; } }\n @media only screen and (min-width: 1024px) and (max-width: 1279px) {\n .wds-content-well {\n width: 988px; } }\n @media only screen and (min-width: 1280px) and (max-width: 1499px) {\n .wds-content-well {\n width: 1244px; } }\n @media only screen and (min-width: 1500px) {\n .wds-content-well {\n width: 1464px; } }\n",""])},function(e,t,n){e.exports={description:"ContentWell wraps `children` in `wds-content-well` CSS mixin.\n",displayName:"ContentWell",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(728)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Open this example in the new page to see the difference:"},{type:"code",content:'\n\t
ContentWell
\n',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o),s=n(105);n(730);function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(e,t){var n=[],a=!0,r=!1,o=void 0;try{for(var i,s=e[Symbol.iterator]();!(a=(i=s.next()).done)&&(n.push(i.value),!t||n.length!==t);a=!0);}catch(e){r=!0,o=e}finally{try{a||null==s.return||s.return()}finally{if(r)throw o}}return n}function _arrayWithHoles(e){if(Array.isArray(e))return e}var l=function Countdown(e){var t,n,o=e.className,i=e.stop,l=e.onTick,c=Object(a.useState)(10),u=(n=2,_arrayWithHoles(t=c)||_iterableToArrayLimit(t,n)||_nonIterableRest()),d=u[0],p=u[1],h=!i&&d>0;Object(s.a)(function(){var e=d-1;p(e),l(e)},h?1e3:null);var f=d<=3?"is-low":d<=7?"is-medium":"is-high";return r.a.createElement("div",{className:"countdown__wrapper ".concat(o)},r.a.createElement("span",{className:"countdown__value"},d),d>0&&r.a.createElement("svg",{className:"countdown__animation ".concat(f)},r.a.createElement("circle",{className:h?"":"is-stopped",r:"15",cx:"17",cy:"17"})))};l.propTypes={className:i.a.string,onTick:i.a.func.isRequired,stop:i.a.bool},l.defaultProps={className:"",stop:!1},t.default=l},function(e,t,n){var a=n(731);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"@keyframes countdown-animation {\n from {\n stroke-dashoffset: 0; }\n to {\n stroke-dashoffset: 95px; } }\n\n.countdown__wrapper {\n align-items: center;\n background-color: #fff;\n border-radius: 100%;\n color: #1a1a1a;\n display: inline-flex;\n height: 40px;\n justify-content: center;\n position: relative;\n width: 40px; }\n .countdown__wrapper::after {\n border: 1px solid #7f9998;\n border-radius: 100%;\n content: ' ';\n height: 30px;\n left: 4px;\n position: absolute;\n top: 4px;\n width: 30px; }\n\n.countdown__value {\n color: #002a32;\n font-size: 18px;\n font-weight: 700; }\n\n.countdown__animation {\n height: 34px;\n position: absolute;\n right: 3px;\n top: 3px;\n transform: rotateY(-180deg) rotateZ(-90deg);\n width: 34px;\n z-index: 1; }\n .countdown__animation.is-low {\n stroke: #e81a3f; }\n .countdown__animation.is-medium {\n stroke: #de5e33; }\n .countdown__animation.is-high {\n stroke: #018c30; }\n\n.countdown__animation > circle {\n fill: none;\n stroke-dasharray: 95px;\n stroke-dashoffset: 0;\n stroke-width: 3px; }\n .countdown__animation > circle:not(.is-stopped) {\n animation: countdown-animation 10s linear forwards; }\n",""])},function(e,t,n){e.exports={description:"Simple circular, countdown-from-10 component with callback.\n",displayName:"Countdown",methods:[],props:[{type:{name:"func"},required:!0,description:"Callback function that will be called at every tick - 1st param is the value",tags:{},name:"onTick"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"if `true` the countdown will be stopped",defaultValue:{value:"false",computed:!1},tags:{},name:"stop"}],doclets:{},tags:{},examples:n(733)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Click the theme buttons to re-initialize examples."},{type:"code",content:' console.log("Countdown: ", value)} />',settings:{},evalInContext:o},{type:"markdown",content:"This timer is always stopped:"},{type:"code",content:' console.log("Stopped countdown: ", value)} />',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n(1),s=n.n(i),l=n(105);function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(e,t){var n=[],a=!0,r=!1,o=void 0;try{for(var i,s=e[Symbol.iterator]();!(a=(i=s.next()).done)&&(n.push(i.value),!t||n.length!==t);a=!0);}catch(e){r=!0,o=e}finally{try{a||null==s.return||s.return()}finally{if(r)throw o}}return n}function _arrayWithHoles(e){if(Array.isArray(e))return e}var c=o.default.div.withConfig({displayName:"StyledCountdown__Wrapper",componentId:"sc-1oil9oi-0"})(["align-items:center;background-color:",";border-radius:100%;color:",";display:inline-flex;height:40px;justify-content:center;position:relative;width:40px;&::after{border:1px solid ",";border-radius:100%;content:' ';height:30px;left:4px;position:absolute;top:4px;width:30px;}"],function(e){return e.theme.color.white},function(e){return e.theme.color.black},function(e){return e.theme.color.fandom_middle_gray}),u=o.default.span.withConfig({displayName:"StyledCountdown__Value",componentId:"sc-1oil9oi-1"})(["color:",";font-size:",";font-weight:",";"],function(e){return e.theme.color.navy},function(e){return e.theme.font_size.l},function(e){return e.theme.font_weight.bold}),d=Object(o.keyframes)(["from{stroke-dashoffset:0;}to{stroke-dashoffset:95px;}"]),p=o.default.circle.withConfig({displayName:"StyledCountdown__Circle",componentId:"sc-1oil9oi-2"})(["fill:none;stroke-dasharray:95px;stroke-dashoffset:0;stroke-width:3px;"]),h=Object(o.default)(p).withConfig({displayName:"StyledCountdown__CircleWithAnimation",componentId:"sc-1oil9oi-3"})(["animation:"," 10s linear forwards;"],d);function levelToStrokeColor(e,t){switch(e){case"low":return t.alert;case"medium":return t.warning;default:return t.success}}var f=o.default.svg.withConfig({displayName:"StyledCountdown__AnimatedProgress",componentId:"sc-1oil9oi-4"})(["height:34px;position:absolute;right:3px;stroke:",";top:3px;transform:rotateY(-180deg) rotateZ(-90deg);width:34px;z-index:1;"],function(e){return levelToStrokeColor(e.level,e.theme.color)}),m=function StyledCountdown(e){var t,n,o=e.className,i=e.stop,s=e.onTick,d=Object(a.useState)(10),m=(n=2,_arrayWithHoles(t=d)||_iterableToArrayLimit(t,n)||_nonIterableRest()),g=m[0],v=m[1],y=!i&&g>0;r.a.useEffect(function(){v(10)},[s]),Object(l.a)(function(){var e=g-1;v(e),s(e)},y?1e3:null);var b=y?h:p,w=g<=3?"low":g<=7?"medium":"high";return r.a.createElement(c,{className:o},r.a.createElement(u,null,g),g>0&&r.a.createElement(f,{level:w},r.a.createElement(b,{r:"15",cx:"17",cy:"17"})))};m.propTypes={className:s.a.string,onTick:s.a.func.isRequired,stop:s.a.bool},m.defaultProps={className:null,stop:!1},t.default=m},function(e,t,n){e.exports={description:"Simple circular, countdown-from-10 component with callback.\n",displayName:"StyledCountdown",methods:[],props:[{type:{name:"func"},required:!0,description:"Callback function that will be called at every tick - 1st param is the value",tags:{},name:"onTick"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"null",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"if `true` the countdown will be stopped",defaultValue:{value:"false",computed:!1},tags:{},name:"stop"}],doclets:{},tags:{},examples:n(736)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Click the theme buttons to re-initialize examples."},{type:"code",content:' console.log("Countdown: ", value)} />',settings:{},evalInContext:o},{type:"markdown",content:"This timer is always stopped:"},{type:"code",content:' console.log("Stopped countdown: ", value)} />',settings:{},evalInContext:o}]},function(e,t,n){var a=n(738);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-dropdown {\n display: inline-block;\n position: relative; }\n .wds-dropdown__toggle {\n cursor: default;\n position: relative; }\n .wds-is-clickable .wds-dropdown__toggle {\n cursor: pointer; }\n .wds-dropdown__content {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n display: none;\n left: 50%;\n min-width: 70%;\n padding: 7px 0;\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1; }\n .wds-dropdown__content.wds-is-right-aligned {\n left: auto;\n right: 0;\n transform: none; }\n .wds-dropdown__content.wds-is-left-aligned {\n left: 0;\n transform: none; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list {\n background-image: radial-gradient(farthest-side at 50% 0, rgba(26, 26, 26, 0.12), transparent), radial-gradient(farthest-side at 50% 100%, rgba(26, 26, 26, 0.12), transparent);\n background-position: 0 0, 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 9px;\n max-height: 270px;\n overflow-y: auto;\n position: relative;\n z-index: 1; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before {\n background-color: #fff;\n content: '';\n display: block;\n height: 30px;\n margin: 0 0 -30px;\n position: relative;\n z-index: -1; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after {\n background-color: #fff;\n margin: -29px 0 0; }\n .wds-dropdown__content.wds-is-not-scrollable .wds-list {\n position: relative; }\n .wds-dropdown__content .wds-list {\n padding: 0; }\n .wds-dropdown__content .wds-list > li {\n margin: 0 9px;\n padding-left: 9px;\n padding-right: 9px;\n white-space: nowrap; }\n .wds-dropdown__content .wds-list.wds-is-linked > li {\n padding: 0; }\n .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button) {\n color: #39424d;\n padding-left: 9px;\n padding-right: 9px;\n text-decoration: none;\n transition-duration: 0.2s;\n transition-property: background-color, color; }\n .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button), .wds-dropdown__content .wds-list.wds-is-linked > li.wds-is-selected > a:not(.wds-button) {\n background-color: rgba(8, 132, 136, 0.1);\n color: #088488; }\n .wds-dropdown::before, .wds-dropdown::after {\n bottom: -1px;\n content: '';\n display: none;\n height: 0;\n left: 50%;\n pointer-events: none;\n position: absolute;\n width: 0;\n z-index: 2; }\n .wds-dropdown::after {\n border: 8px solid transparent;\n border-bottom-color: #fff;\n margin-left: -8px; }\n .wds-dropdown::before {\n border: 9px solid transparent;\n border-bottom-color: #ccc;\n margin-left: -9px; }\n .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::after {\n display: block; }\n .wds-dropdown.wds-is-active .wds-dropdown__content, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__content {\n display: inline-block; }\n .wds-dropdown.wds-is-active .wds-dropdown__toggle-chevron, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__toggle-chevron {\n transform: rotate(180deg); }\n .wds-dropdown.wds-is-active.wds-has-shadow::before, .wds-dropdown.wds-is-active.wds-has-dark-shadow::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover.wds-has-shadow::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover.wds-has-dark-shadow::before {\n display: none; }\n .wds-dropdown.wds-has-shadow .wds-dropdown__content {\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.2); }\n .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {\n box-shadow: 0 0 20px 0 rgba(26, 26, 26, 0.3); }\n .wds-dropdown.wds-has-shadow .wds-dropdown__content, .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {\n border: 0; }\n .wds-dropdown.wds-is-flipped::before, .wds-dropdown.wds-is-flipped::after {\n bottom: unset;\n top: -1px; }\n .wds-dropdown.wds-is-flipped::before {\n border-bottom-color: transparent;\n border-top-color: #ccc; }\n .wds-dropdown.wds-is-flipped::after {\n border-bottom-color: transparent;\n border-top-color: #fff; }\n .wds-dropdown.wds-is-flipped .wds-dropdown__content {\n bottom: 100%;\n top: unset; }\n\n.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 {\n margin-right: 0; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 > a {\n padding-right: 18px;\n display: flex;\n justify-content: space-between; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-chevron {\n transform: rotate(-90deg);\n margin-left: 18px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent {\n position: relative; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent .wds-dropdown-level-2__content {\n top: auto;\n bottom: -8px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n display: none;\n left: 100%;\n padding: 7px 0;\n position: absolute;\n top: -8px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content .wds-list.wds-is-linked > li > a {\n font-size: 12px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-active .wds-dropdown-level-2__content, .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:not(.wds-is-touch-device):hover .wds-dropdown-level-2__content {\n display: block; }\n",""])},function(e,t,n){e.exports={description:"Basic Dropdown component\n",displayName:"Dropdown",methods:[],props:[{type:{name:"union",value:[{name:"func"},{name:"string"},{name:"node"}]},required:!0,description:"React Component to display as a dropdown toggle",tags:{},name:"toggle"},{type:{name:"bool"},required:!1,description:"Whether or nor not dropdown should automatically flip when it's near the bottom of the viewport",defaultValue:{value:"false",computed:!1},tags:{},name:"canFlip"},{type:{name:"node"},required:!1,description:"React Component to display as the Dropdown Content",defaultValue:{value:"null",computed:!1},tags:{},name:"children"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"HTML classes to add to content element",defaultValue:{value:"''",computed:!1},tags:{},name:"contentClassName"},{type:{name:"bool"},required:!1,description:"Should dropdown content be scrollable",defaultValue:{value:"false",computed:!1},tags:{},name:"contentScrollable"},{type:{name:"bool"},required:!1,description:"Should dropdown content be left-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownLeftAligned"},{type:{name:"bool"},required:!1,description:"Should dropdown content be right-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownRightAligned"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a drop shadow (darker than the one produced by hasShadow)",defaultValue:{value:"false",computed:!1},tags:{},name:"hasDarkShadow"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a slight drop shadow",defaultValue:{value:"false",computed:!1},tags:{},name:"hasShadow"},{type:{name:"enum",value:[{value:"'dropdown-tiny'",computed:!1},{value:"'menu-control-tiny'",computed:!1}]},required:!1,description:"The icon to use for the dropdown chevron",defaultValue:{value:"'menu-control-tiny'",computed:!1},tags:{},name:"iconName"},{type:{name:"bool"},required:!1,description:"is active",defaultValue:{value:"false",computed:!1},tags:{},name:"isActive"},{type:{name:"bool"},required:!1,description:"Is it a nested dropdown",defaultValue:{value:"false",computed:!1},tags:{},name:"isLevel2"},{type:{name:"bool"},required:!1,description:"If dropdown should not be hoverable",defaultValue:{value:"false",computed:!1},tags:{},name:"isNotHoverable"},{type:{name:"bool"},required:!1,description:"if the top of nested dropdown content should be positioned at the same height as toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"isStickedToParent"},{type:{name:"bool"},required:!1,description:"Should chevron on the top of dropdown content be hidden",defaultValue:{value:"false",computed:!1},tags:{},name:"noChevron"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be closed",defaultValue:{value:"null",computed:!1},tags:{},name:"onClose"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be hovered",defaultValue:{value:"null",computed:!1},tags:{},name:"onMouseEnter"},{type:{name:"shape",value:{href:{name:"string",required:!1}}},required:!1,description:"HTML attributes to add to toggle",defaultValue:{value:"{}",computed:!1},tags:{},name:"toggleAttrs"},{type:{name:"string"},required:!1,description:"HTML classes to add to toggle",defaultValue:{value:"''",computed:!1},tags:{},name:"toggleClassName"}],doclets:{},tags:{},examples:n(740)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"\n

I am a text inside dropdown!

\n",settings:{},evalInContext:o},{type:"markdown",content:"Dropdown using dropdown-tiny chevron:"},{type:"code",content:'\n

I am a text inside dropdown!

\n',settings:{},evalInContext:o},{type:"markdown",content:"Nested dropdown:"},{type:"code",content:'\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"",displayName:"StyledDropdown",methods:[],props:[{type:{name:"union",value:[{name:"func"},{name:"string"},{name:"node"}]},required:!0,description:"React Component to display as a dropdown toggle",tags:{},name:"toggle"},{type:{name:"bool"},required:!1,description:"Whether or nor not dropdown should automatically flip when it's near the bottom of the viewport",defaultValue:{value:"false",computed:!1},tags:{},name:"canFlip"},{type:{name:"node"},required:!1,description:"React Component to display as the Dropdown Content",defaultValue:{value:"null",computed:!1},tags:{},name:"children"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"HTML classes to add to content element",defaultValue:{value:"''",computed:!1},tags:{},name:"contentClassName"},{type:{name:"bool"},required:!1,description:"Should dropdown content be scrollable",defaultValue:{value:"false",computed:!1},tags:{},name:"contentScrollable"},{type:{name:"bool"},required:!1,description:"Should dropdown content be left-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownLeftAligned"},{type:{name:"bool"},required:!1,description:"Should dropdown content be right-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownRightAligned"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a drop shadow (darker than the one produced by hasShadow)",defaultValue:{value:"false",computed:!1},tags:{},name:"hasDarkShadow"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a slight drop shadow",defaultValue:{value:"false",computed:!1},tags:{},name:"hasShadow"},{type:{name:"enum",value:[{value:"'dropdown-tiny'",computed:!1},{value:"'menu-control-tiny'",computed:!1}]},required:!1,description:"The icon to use for the dropdown chevron",defaultValue:{value:"'menu-control-tiny'",computed:!1},tags:{},name:"iconName"},{type:{name:"bool"},required:!1,description:"is active",defaultValue:{value:"false",computed:!1},tags:{},name:"isActive"},{type:{name:"bool"},required:!1,description:"Is it a nested dropdown",defaultValue:{value:"false",computed:!1},tags:{},name:"isLevel2"},{type:{name:"bool"},required:!1,description:"If dropdown should not be hoverable",defaultValue:{value:"false",computed:!1},tags:{},name:"isNotHoverable"},{type:{name:"bool"},required:!1,description:"if the top of nested dropdown content should be positioned at the same height as toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"isStickedToParent"},{type:{name:"bool"},required:!1,description:"Should chevron on the top of dropdown content be hidden",defaultValue:{value:"false",computed:!1},tags:{},name:"noChevron"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be closed",defaultValue:{value:"null",computed:!1},tags:{},name:"onClose"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be hovered",defaultValue:{value:"null",computed:!1},tags:{},name:"onMouseEnter"},{type:{name:"shape",value:{href:{name:"string",required:!1}}},required:!1,description:"HTML attributes to add to toggle",defaultValue:{value:"{}",computed:!1},tags:{},name:"toggleAttrs"},{type:{name:"string"},required:!1,description:"HTML classes to add to toggle",defaultValue:{value:"''",computed:!1},tags:{},name:"toggleClassName"}],doclets:{},examples:n(742)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"\n

I am a text inside dropdown!

\n",settings:{},evalInContext:o},{type:"markdown",content:"Dropdown using dropdown-tiny chevron:"},{type:"code",content:'\n

I am a text inside dropdown!

\n',settings:{},evalInContext:o},{type:"markdown",content:"Nested dropdown:"},{type:"code",content:'\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n',settings:{},evalInContext:o}]},function(e,t,n){var a=n(744);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,".expandable-text__expand {\n /* unstyle button */\n background: none;\n border: 0;\n cursor: pointer;\n display: inline;\n font: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0; }\n .expandable-text__expand:active {\n outline: 0; }\n",""])},function(e,t,n){e.exports={description:"ExpandableText component can be used to temporarily limit text showed to the user.\nIt has a button used to fully expand the text.\nIf the source text is shorter than the limit the button do not show.\n\nBoth button label and string used to ellipsis has to be configured.\nButton and the text itself can be syled with classes passed to the component.\n",displayName:"ExpandableText",methods:[],props:[{type:{name:"number"},required:!0,description:"Additional class name",tags:{},name:"characterLimit"},{type:{name:"string"},required:!0,description:"Label used on the expand button",tags:{},name:"expandLabel"},{type:{name:"string"},required:!0,description:"Full text to display",tags:{},name:"text"},{type:{name:"string"},required:!1,description:"Character limit",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"Ellipsis (defaults to `…`)",defaultValue:{value:"'\\u2026'",computed:!1},tags:{},name:"ellipsis"},{type:{name:"string"},required:!1,description:"Additional class name for the expand button",defaultValue:{value:"''",computed:!1},tags:{},name:"expandClassName"}],doclets:{},tags:{},examples:n(746)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function FandomBackgroundImage(e){var t=e.className,n=e.width,a=_objectWithoutProperties(e,["className","width"]),o=Math.floor(9*n/16);return r.a.createElement("svg",_extends({className:t,width:n,height:o,viewBox:"0 0 322 182",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},a),r.a.createElement("defs",null,r.a.createElement("path",{id:"fandom-background-image-a",d:"M0 0h322v181.125H0z"})),r.a.createElement("g",{fill:"none",fillRule:"evenodd"},r.a.createElement("mask",{id:"fandom-background-image-b",fill:"#fff"},r.a.createElement("use",{xlinkHref:"#fandom-background-image-a"})),r.a.createElement("use",{fill:"#00D6D6",xlinkHref:"#fandom-background-image-a"}),r.a.createElement("g",{fill:"#002A32",opacity:".07",mask:"url(#fandom-background-image-b)"},r.a.createElement("path",{d:"M220.746 101.305c0 1.17-.457 2.29-1.27 3.122l-53.435 54.578c-.9.908-1.81 1.315-2.94 1.315-1.17 0-2.2-.444-3.07-1.32l-3.77-3.607a1.695 1.695 0 0 1-.03-2.402l61.67-62.86c1.05-1.07 2.86-.32 2.86 1.19v10zm-68.525 41.157l-3.05 2.783a2.52 2.52 0 0 1-3.48-.078l-40.66-40.454a5.465 5.465 0 0 1-1.6-3.86v-7.56c0-2.722 3.26-4.094 5.19-2.18l43.17 42.947c.75.756 2.02 2.315 2.02 4.2 0 1.2-.27 2.902-1.56 4.202zm-36.34-78.29l13.99-14.086a1.66 1.66 0 0 1 2.36 0l46.85 47.188c5.02 5.053 5.02 13.244 0 18.296l-13.98 14.082a1.66 1.66 0 0 1-2.36 0l-46.84-47.19c-2.41-2.43-3.74-5.678-3.74-9.148 0-3.465 1.33-6.712 3.74-9.14zm55.43 8.07l14.62-14.726c2.85-2.867 6.82-4.218 10.93-3.647 2.88.4 5.5 1.9 7.56 3.98l14.81 14.91c.65.65.65 1.72 0 2.38L196.7 97.81a1.663 1.663 0 0 1-2.363 0L171.31 74.62a1.692 1.692 0 0 1 0-2.38zm58.14-2.797l-32.61-33.408a3.422 3.422 0 0 0-4.9-.01l-25.86 26.298a5.097 5.097 0 0 1-7.26.02l-25.86-26.02a3.424 3.424 0 0 0-4.85-.018L94.8 69.367a6.024 6.024 0 0 0-1.8 4.296v31.307c0 1.6.63 3.135 1.755 4.267l64.92 65.363a3.425 3.425 0 0 0 4.87-.002l64.862-65.363a6.055 6.055 0 0 0 1.753-4.265V73.673c0-1.58-.617-3.1-1.718-4.228z"}),r.a.createElement("path",{d:"M248.557 243.388a6.624 6.624 0 0 1-1.886 4.632l-79.28 80.987c-1.34 1.347-2.69 1.95-4.37 1.95-1.73 0-3.26-.66-4.55-1.958l-5.59-5.36a2.517 2.517 0 0 1-.06-3.57l91.51-93.29c1.56-1.59 4.25-.48 4.25 1.75v14.83zm-101.68 61.07l-4.536 4.13a3.735 3.735 0 0 1-5.16-.115l-60.34-60.03a8.074 8.074 0 0 1-2.37-5.727V231.5c0-4.04 4.84-6.077 7.69-3.237l64.05 63.727c1.12 1.123 3 3.436 3 6.232 0 1.78-.4 4.308-2.31 6.237zm-53.93-116.17l20.752-20.903a2.46 2.46 0 0 1 3.5 0l69.51 70.02c7.44 7.5 7.44 19.653 0 27.15l-20.74 20.895c-.97.975-2.54.975-3.51 0l-69.51-70.022c-3.58-3.606-5.55-8.426-5.55-13.575 0-5.142 1.97-9.96 5.54-13.565zm82.255 11.972l21.692-21.85c4.23-4.254 10.117-6.26 16.212-5.41 4.276.594 8.16 2.83 11.21 5.905l21.965 22.125c.97.975.97 2.555 0 3.532l-33.4 33.648c-.96.973-2.54.973-3.5 0l-34.16-34.42a2.505 2.505 0 0 1 0-3.53zm86.26-4.148l-48.38-49.573a5.084 5.084 0 0 0-7.278-.02l-38.37 39.02a7.565 7.565 0 0 1-10.774.03l-38.38-38.62a5.088 5.088 0 0 0-7.2-.03l-49.43 49.06a8.978 8.978 0 0 0-2.65 6.37v46.45c0 2.372.936 4.65 2.605 6.33l96.33 96.99a5.088 5.088 0 0 0 7.23 0l96.244-96.99a9.015 9.015 0 0 0 2.6-6.33v-46.44c0-2.35-.92-4.6-2.55-6.277zM74.452-61.735c0-1.733.68-3.397 1.887-4.63l79.28-80.988c1.34-1.347 2.69-1.95 4.37-1.95 1.73 0 3.26.66 4.55 1.958l5.59 5.352c1.01.963 1.03 2.57.06 3.565l-91.5 93.286c-1.56 1.59-4.25.477-4.25-1.755v-14.838zm101.68-61.07l4.537-4.13a3.735 3.735 0 0 1 5.16.115l60.34 60.03a8.078 8.078 0 0 1 2.37 5.728v11.215c0 4.04-4.84 6.077-7.69 3.237l-64.05-63.727c-1.12-1.123-3-3.436-3-6.232 0-1.78.4-4.3 2.31-6.23zm53.93 116.17L209.31 14.268a2.464 2.464 0 0 1-3.504 0l-69.517-70.02c-7.45-7.498-7.45-19.653 0-27.15l20.74-20.895a2.46 2.46 0 0 1 3.5 0l69.51 70.023c3.58 3.605 5.55 8.426 5.55 13.574 0 5.142-1.97 9.96-5.54 13.565zM147.81-18.607l-21.692 21.85c-4.23 4.255-10.117 6.26-16.212 5.412-4.276-.595-8.16-2.832-11.21-5.906L76.728-19.38a2.507 2.507 0 0 1 0-3.532l33.403-33.646a2.472 2.472 0 0 1 3.51 0l34.17 34.418c.97.976.97 2.557 0 3.53zM61.55-14.46l48.38 49.576a5.086 5.086 0 0 0 7.278.013l38.37-39.02a7.556 7.556 0 0 1 10.774-.03l38.38 38.61a5.079 5.079 0 0 0 7.2.02l49.43-49.06a8.984 8.984 0 0 0 2.65-6.38v-46.45a8.97 8.97 0 0 0-2.605-6.33l-96.33-96.99a5.088 5.088 0 0 0-7.23 0L61.6-73.5a8.986 8.986 0 0 0-2.6 6.327v46.44c0 2.348.915 4.6 2.55 6.274zM8.612 177.558a6.624 6.624 0 0 1-4.632-1.886l-80.987-79.285c-1.347-1.338-1.95-2.688-1.95-4.37 0-1.734.66-3.266 1.958-4.557l5.36-5.59a2.515 2.515 0 0 1 3.57-.058l93.29 91.505c1.59 1.558.48 4.243-1.75 4.243H8.62zm-61.07-101.68l-4.13-4.536a3.74 3.74 0 0 1 .115-5.164L3.557 5.83a8.074 8.074 0 0 1 5.726-2.378H20.5c4.04 0 6.077 4.837 3.237 7.69L-39.99 75.2c-1.123 1.113-3.436 2.993-6.232 2.993-1.78 0-4.308-.402-6.237-2.317zm116.17-53.93L84.615 42.7a2.464 2.464 0 0 1 0 3.504l-70.02 69.517c-7.5 7.45-19.653 7.45-27.15 0L-33.45 94.98a2.468 2.468 0 0 1 0-3.507L36.572 21.96c3.606-3.58 8.426-5.55 13.575-5.55 5.142 0 9.96 1.967 13.565 5.54zM51.74 104.202l21.85 21.692c4.254 4.23 6.26 10.117 5.41 16.212-.594 4.276-2.83 8.16-5.905 11.21L50.97 175.282c-.975.97-2.555.97-3.532 0L13.79 141.878a2.47 2.47 0 0 1 0-3.507l34.42-34.16a2.505 2.505 0 0 1 3.53 0zm4.148 86.26l49.573-48.38c2.05-2 2.06-5.272.02-7.278l-39.02-38.37a7.565 7.565 0 0 1-.03-10.774l38.62-38.38c2-1.987 2.01-5.202.03-7.2L56.01-9.35A8.997 8.997 0 0 0 49.63-12H3.174a8.974 8.974 0 0 0-6.33 2.605l-96.99 96.33a5.086 5.086 0 0 0 .002 7.23l96.99 96.244a9.009 9.009 0 0 0 6.328 2.6h46.44a9 9 0 0 0 6.274-2.55zM313.735 3.452c1.733 0 3.397.68 4.63 1.887l80.988 79.28c1.347 1.34 1.95 2.69 1.95 4.37 0 1.73-.66 3.26-1.958 4.55l-5.352 5.59a2.511 2.511 0 0 1-3.565.06l-93.286-91.5c-1.59-1.56-.477-4.25 1.755-4.25h14.838zm61.07 101.68l4.13 4.537a3.735 3.735 0 0 1-.115 5.16l-60.03 60.34a8.078 8.078 0 0 1-5.728 2.37h-11.215c-4.04 0-6.077-4.84-3.237-7.69l63.727-64.06c1.123-1.12 3.436-3 6.232-3 1.78 0 4.3.4 6.23 2.312zm-116.17 53.93l-20.903-20.75a2.466 2.466 0 0 1 0-3.505l70.02-69.517c7.498-7.444 19.653-7.444 27.15 0l20.895 20.743c.975.97.975 2.54 0 3.507l-70.023 69.515c-3.605 3.578-8.426 5.55-13.574 5.55-5.142 0-9.96-1.968-13.565-5.542zm11.972-82.254l-21.85-21.692c-4.255-4.23-6.26-10.117-5.412-16.212.595-4.276 2.832-8.16 5.906-11.21L271.38 5.73a2.507 2.507 0 0 1 3.532 0l33.646 33.402c.975.968.975 2.54 0 3.507L274.14 76.8a2.508 2.508 0 0 1-3.53 0zm-4.148-86.26l-49.58 48.38a5.084 5.084 0 0 0-.02 7.278l39.02 38.37a7.574 7.574 0 0 1 .03 10.774l-38.61 38.38a5.088 5.088 0 0 0-.03 7.2l49.05 49.43a8.978 8.978 0 0 0 6.37 2.65h46.46c2.37 0 4.65-.936 6.33-2.605l96.99-96.33a5.08 5.08 0 0 0-.01-7.23L325.5-9.4a8.986 8.986 0 0 0-6.327-2.6h-46.44c-2.348 0-4.6.915-6.274 2.55z"}))))};s.propTypes={className:i.a.string,width:i.a.number},s.defaultProps={className:"",width:322},t.default=s},function(e,t,n){e.exports={description:"An image background that can be used as a sample image.\n",displayName:"FandomBackgroundImage",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"number"},required:!1,description:"Image width",defaultValue:{value:"322",computed:!1},tags:{},name:"width"}],doclets:{},tags:{},examples:n(749)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"Custom width and className:"},{type:"code",content:"
\n\t\n
",settings:{},evalInContext:o}]},function(e,t,n){var a=n(751);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-fandom-content-well {\n box-sizing: border-box; }\n @media only screen and (max-width: 767px) {\n .wds-fandom-content-well {\n margin: 0 18px; } }\n @media only screen and (min-width: 768px) {\n .wds-fandom-content-well {\n margin: 0 auto; } }\n @media only screen and (min-width: 768px) and (max-width: 1023px) {\n .wds-fandom-content-well {\n width: 732px; } }\n @media only screen and (min-width: 1024px) and (max-width: 1279px) {\n .wds-fandom-content-well {\n width: 988px; } }\n @media only screen and (min-width: 1280px) {\n .wds-fandom-content-well {\n width: 1244px; } }\n",""])},function(e,t,n){e.exports={description:"FandomContentWell wraps `children` in `wds-content-well($use-xxlarge-breakpoint: false)` CSS mixin.\n",displayName:"FandomContentWell",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(753)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Open this example in the new page to see the difference:"},{type:"code",content:'\n\t
FandomContentWell
\n',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(755);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function Fieldset(e){var t=e.className,n=e.children,a=_objectWithoutProperties(e,["className","children"]);return r.a.createElement("div",_extends({className:"wds-fieldset ".concat(t)},a),n)};s.propTypes={children:i.a.node,className:i.a.string},s.defaultProps={children:null,className:""},t.default=s},function(e,t,n){var a=n(756);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,".wds-fieldset {\n background-color: #fff;\n border: 0;\n display: flex;\n flex-direction: column;\n margin-bottom: 6px;\n padding: 16px 0; }\n",""])},function(e,t,n){e.exports={description:"",displayName:"Fieldset",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},examples:n(758)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:'
\n\t\n\t\n
',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(760);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function FloatingButton(e){var t=e.className,n=e.href,a=e.children,o=_objectWithoutProperties(e,["className","href","children"]),i=["wds-floating-button",t].filter(function(e){return e}).join(" ");return n?r.a.createElement("a",_extends({href:n,className:i},o),a):r.a.createElement("button",_extends({className:i},o),a)};s.propTypes={children:i.a.node,className:i.a.string,disabled:i.a.bool,href:i.a.string,onClick:i.a.func},s.defaultProps={children:null,className:"",disabled:!1,href:null,onClick:function onClick(){}},t.default=s},function(e,t,n){var a=n(761);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-floating-button {\n align-items: center;\n background: #fff;\n border-radius: 50%;\n border: 0;\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.2);\n display: flex;\n height: 36px;\n justify-content: center;\n margin: 0;\n outline: none;\n padding: 0;\n transition-duration: 300ms;\n transition-property: box-shadow;\n width: 36px; }\n .wds-floating-button:not([disabled]), .wds-floating-button:not(.wds-is-disabled) {\n cursor: pointer; }\n .wds-floating-button:not([disabled]):hover, .wds-floating-button:not(.wds-is-disabled):hover {\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.4); }\n\n.wds-floating-button-group {\n display: inline-flex; }\n .wds-floating-button-group.wds-is-vertical {\n flex-flow: column; }\n .wds-floating-button-group:not(.wds-is-vertical) > .wds-floating-button:not(:first-child) {\n margin-left: 8px; }\n .wds-floating-button-group.wds-is-vertical > .wds-floating-button:not(:first-child) {\n margin-top: 8px; }\n",""])},function(e,t,n){e.exports={description:"Floating button (icons-only)\n",displayName:"FloatingButton",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"Disabled attribute for the `",settings:{},evalInContext:o},{type:"markdown",content:"Different styles:"},{type:"code",content:"
\n\t\n\t\n\t\n\t\n\t\n\t\n
",settings:{},evalInContext:o},{type:"markdown",content:"Full width:"},{type:"code",content:"",settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"Button group component\n",displayName:"ButtonGroup",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(718)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Regular buttons:"},{type:"code",content:"\n\t\n\t\n\t\n\t\n",settings:{},evalInContext:o},{type:"markdown",content:"Secondary buttons:"},{type:"code",content:"\n\t\n\t\n\t\n\t\n",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o),s=n(6),l=n.n(s),c=n(104),u=n.n(c),d=n(69),p=n(68),h=n(76);n(720);function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(e){return typeof e}:function _typeof(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n\n setState({checkbox1: !state.checkbox1})}>Default checkbox\n setState({checkbox2: !state.checkbox2})}>Extra className\n',settings:{},evalInContext:o},{type:"markdown",content:"Disabled checkbox:"},{type:"code",content:"initialState = {\n checkbox3: false,\n checkbox4: true,\n};\n\n
\n setState({checkbox3: !state.checkbox3})}>Disabled unchecked checkbox\n setState({checkbox4: !state.checkbox4})}>Disabled checked checkbox\n
",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(725);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function ContentWell(e){var t=e.className,n=e.children,a=_objectWithoutProperties(e,["className","children"]);return r.a.createElement("div",_extends({className:"wds-content-well ".concat(t)},a),n)};s.propTypes={children:i.a.node,className:i.a.string},s.defaultProps={children:null,className:""},t.default=s},function(e,t,n){var a=n(726);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-content-well {\n box-sizing: border-box; }\n @media only screen and (max-width: 767px) {\n .wds-content-well {\n margin: 0 18px; } }\n @media only screen and (min-width: 768px) {\n .wds-content-well {\n margin: 0 auto; } }\n @media only screen and (min-width: 768px) and (max-width: 1023px) {\n .wds-content-well {\n width: 732px; } }\n @media only screen and (min-width: 1024px) and (max-width: 1279px) {\n .wds-content-well {\n width: 988px; } }\n @media only screen and (min-width: 1280px) and (max-width: 1499px) {\n .wds-content-well {\n width: 1244px; } }\n @media only screen and (min-width: 1500px) {\n .wds-content-well {\n width: 1464px; } }\n",""])},function(e,t,n){e.exports={description:"ContentWell wraps `children` in `wds-content-well` CSS mixin.\n",displayName:"ContentWell",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(728)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Open this example in the new page to see the difference:"},{type:"code",content:'\n\t
ContentWell
\n',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o),s=n(105);n(730);function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(e,t){var n=[],a=!0,r=!1,o=void 0;try{for(var i,s=e[Symbol.iterator]();!(a=(i=s.next()).done)&&(n.push(i.value),!t||n.length!==t);a=!0);}catch(e){r=!0,o=e}finally{try{a||null==s.return||s.return()}finally{if(r)throw o}}return n}function _arrayWithHoles(e){if(Array.isArray(e))return e}var l=function Countdown(e){var t,n,o=e.className,i=e.stop,l=e.onTick,c=Object(a.useState)(10),u=(n=2,_arrayWithHoles(t=c)||_iterableToArrayLimit(t,n)||_nonIterableRest()),d=u[0],p=u[1],h=!i&&d>0;Object(s.a)(function(){var e=d-1;p(e),l(e)},h?1e3:null);var f=d<=3?"is-low":d<=7?"is-medium":"is-high";return r.a.createElement("div",{className:"countdown__wrapper ".concat(o)},r.a.createElement("span",{className:"countdown__value"},d),d>0&&r.a.createElement("svg",{className:"countdown__animation ".concat(f)},r.a.createElement("circle",{className:h?"":"is-stopped",r:"15",cx:"17",cy:"17"})))};l.propTypes={className:i.a.string,onTick:i.a.func.isRequired,stop:i.a.bool},l.defaultProps={className:"",stop:!1},t.default=l},function(e,t,n){var a=n(731);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"@keyframes countdown-animation {\n from {\n stroke-dashoffset: 0; }\n to {\n stroke-dashoffset: 95px; } }\n\n.countdown__wrapper {\n align-items: center;\n background-color: #fff;\n border-radius: 100%;\n color: #1a1a1a;\n display: inline-flex;\n height: 40px;\n justify-content: center;\n position: relative;\n width: 40px; }\n .countdown__wrapper::after {\n border: 1px solid #7f9998;\n border-radius: 100%;\n content: ' ';\n height: 30px;\n left: 4px;\n position: absolute;\n top: 4px;\n width: 30px; }\n\n.countdown__value {\n color: #002a32;\n font-size: 18px;\n font-weight: 700; }\n\n.countdown__animation {\n height: 34px;\n position: absolute;\n right: 3px;\n top: 3px;\n transform: rotateY(-180deg) rotateZ(-90deg);\n width: 34px;\n z-index: 1; }\n .countdown__animation.is-low {\n stroke: #e81a3f; }\n .countdown__animation.is-medium {\n stroke: #de5e33; }\n .countdown__animation.is-high {\n stroke: #018c30; }\n\n.countdown__animation > circle {\n fill: none;\n stroke-dasharray: 95px;\n stroke-dashoffset: 0;\n stroke-width: 3px; }\n .countdown__animation > circle:not(.is-stopped) {\n animation: countdown-animation 10s linear forwards; }\n",""])},function(e,t,n){e.exports={description:"Simple circular, countdown-from-10 component with callback.\n",displayName:"Countdown",methods:[],props:[{type:{name:"func"},required:!0,description:"Callback function that will be called at every tick - 1st param is the value",tags:{},name:"onTick"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"if `true` the countdown will be stopped",defaultValue:{value:"false",computed:!1},tags:{},name:"stop"}],doclets:{},tags:{},examples:n(733)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Click the theme buttons to re-initialize examples."},{type:"code",content:' console.log("Countdown: ", value)} />',settings:{},evalInContext:o},{type:"markdown",content:"This timer is always stopped:"},{type:"code",content:' console.log("Stopped countdown: ", value)} />',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(3),i=n(1),s=n.n(i),l=n(105);function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(e,t){var n=[],a=!0,r=!1,o=void 0;try{for(var i,s=e[Symbol.iterator]();!(a=(i=s.next()).done)&&(n.push(i.value),!t||n.length!==t);a=!0);}catch(e){r=!0,o=e}finally{try{a||null==s.return||s.return()}finally{if(r)throw o}}return n}function _arrayWithHoles(e){if(Array.isArray(e))return e}var c=o.default.div.withConfig({displayName:"StyledCountdown__Wrapper",componentId:"sc-1oil9oi-0"})(["align-items:center;background-color:",";border-radius:100%;color:",";display:inline-flex;height:40px;justify-content:center;position:relative;width:40px;&::after{border:1px solid ",";border-radius:100%;content:' ';height:30px;left:4px;position:absolute;top:4px;width:30px;}"],function(e){return e.theme.color.white},function(e){return e.theme.color.black},function(e){return e.theme.color.fandom_middle_gray}),u=o.default.span.withConfig({displayName:"StyledCountdown__Value",componentId:"sc-1oil9oi-1"})(["color:",";font-size:",";font-weight:",";"],function(e){return e.theme.color.navy},function(e){return e.theme.font_size.l},function(e){return e.theme.font_weight.bold}),d=Object(o.keyframes)(["from{stroke-dashoffset:0;}to{stroke-dashoffset:95px;}"]),p=o.default.circle.withConfig({displayName:"StyledCountdown__Circle",componentId:"sc-1oil9oi-2"})(["fill:none;stroke-dasharray:95px;stroke-dashoffset:0;stroke-width:3px;"]),h=Object(o.default)(p).withConfig({displayName:"StyledCountdown__CircleWithAnimation",componentId:"sc-1oil9oi-3"})(["animation:"," 10s linear forwards;"],d);function levelToStrokeColor(e,t){switch(e){case"low":return t.alert;case"medium":return t.warning;default:return t.success}}var f=o.default.svg.withConfig({displayName:"StyledCountdown__AnimatedProgress",componentId:"sc-1oil9oi-4"})(["height:34px;position:absolute;right:3px;stroke:",";top:3px;transform:rotateY(-180deg) rotateZ(-90deg);width:34px;z-index:1;"],function(e){return levelToStrokeColor(e.level,e.theme.color)}),m=function StyledCountdown(e){var t,n,o=e.className,i=e.stop,s=e.onTick,d=Object(a.useState)(10),m=(n=2,_arrayWithHoles(t=d)||_iterableToArrayLimit(t,n)||_nonIterableRest()),g=m[0],v=m[1],y=!i&&g>0;r.a.useEffect(function(){v(10)},[s]),Object(l.a)(function(){var e=g-1;v(e),s(e)},y?1e3:null);var b=y?h:p,w=g<=3?"low":g<=7?"medium":"high";return r.a.createElement(c,{className:o},r.a.createElement(u,null,g),g>0&&r.a.createElement(f,{level:w},r.a.createElement(b,{r:"15",cx:"17",cy:"17"})))};m.propTypes={className:s.a.string,onTick:s.a.func.isRequired,stop:s.a.bool},m.defaultProps={className:null,stop:!1},t.default=m},function(e,t,n){e.exports={description:"Simple circular, countdown-from-10 component with callback.\n",displayName:"StyledCountdown",methods:[],props:[{type:{name:"func"},required:!0,description:"Callback function that will be called at every tick - 1st param is the value",tags:{},name:"onTick"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"null",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"if `true` the countdown will be stopped",defaultValue:{value:"false",computed:!1},tags:{},name:"stop"}],doclets:{},tags:{},examples:n(736)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Click the theme buttons to re-initialize examples."},{type:"code",content:' console.log("Countdown: ", value)} />',settings:{},evalInContext:o},{type:"markdown",content:"This timer is always stopped:"},{type:"code",content:' console.log("Stopped countdown: ", value)} />',settings:{},evalInContext:o}]},function(e,t,n){var a=n(738);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-dropdown {\n display: inline-block;\n position: relative; }\n .wds-dropdown__toggle {\n cursor: default;\n position: relative; }\n .wds-is-clickable .wds-dropdown__toggle {\n cursor: pointer; }\n .wds-dropdown__content {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n display: none;\n left: 50%;\n min-width: 70%;\n padding: 7px 0;\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1; }\n .wds-dropdown__content.wds-is-right-aligned {\n left: auto;\n right: 0;\n transform: none; }\n .wds-dropdown__content.wds-is-left-aligned {\n left: 0;\n transform: none; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list {\n background-image: radial-gradient(farthest-side at 50% 0, rgba(26, 26, 26, 0.12), transparent), radial-gradient(farthest-side at 50% 100%, rgba(26, 26, 26, 0.12), transparent);\n background-position: 0 0, 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 9px;\n max-height: 270px;\n overflow-y: auto;\n position: relative;\n z-index: 1; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before {\n background-color: #fff;\n content: '';\n display: block;\n height: 30px;\n margin: 0 0 -30px;\n position: relative;\n z-index: -1; }\n .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after {\n background-color: #fff;\n margin: -29px 0 0; }\n .wds-dropdown__content.wds-is-not-scrollable .wds-list {\n position: relative; }\n .wds-dropdown__content .wds-list {\n padding: 0; }\n .wds-dropdown__content .wds-list > li {\n margin: 0 9px;\n padding-left: 9px;\n padding-right: 9px;\n white-space: nowrap; }\n .wds-dropdown__content .wds-list.wds-is-linked > li {\n padding: 0; }\n .wds-dropdown__content .wds-list.wds-is-linked > li > a:not(.wds-button) {\n color: #39424d;\n padding-left: 9px;\n padding-right: 9px;\n text-decoration: none;\n transition-duration: 0.2s;\n transition-property: background-color, color; }\n .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button), .wds-dropdown__content .wds-list.wds-is-linked > li.wds-is-selected > a:not(.wds-button) {\n background-color: rgba(8, 132, 136, 0.1);\n color: #088488; }\n .wds-dropdown::before, .wds-dropdown::after {\n bottom: -1px;\n content: '';\n display: none;\n height: 0;\n left: 50%;\n pointer-events: none;\n position: absolute;\n width: 0;\n z-index: 2; }\n .wds-dropdown::after {\n border: 8px solid transparent;\n border-bottom-color: #fff;\n margin-left: -8px; }\n .wds-dropdown::before {\n border: 9px solid transparent;\n border-bottom-color: #ccc;\n margin-left: -9px; }\n .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover:not(.wds-no-chevron)::after {\n display: block; }\n .wds-dropdown.wds-is-active .wds-dropdown__content, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__content {\n display: inline-block; }\n .wds-dropdown.wds-is-active .wds-dropdown__toggle-chevron, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover .wds-dropdown__toggle-chevron {\n transform: rotate(180deg); }\n .wds-dropdown.wds-is-active.wds-has-shadow::before, .wds-dropdown.wds-is-active.wds-has-dark-shadow::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover.wds-has-shadow::before, .wds-dropdown:not(.wds-is-touch-device):not(.wds-is-not-hoverable):hover.wds-has-dark-shadow::before {\n display: none; }\n .wds-dropdown.wds-has-shadow .wds-dropdown__content {\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.2); }\n .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {\n box-shadow: 0 0 20px 0 rgba(26, 26, 26, 0.3); }\n .wds-dropdown.wds-has-shadow .wds-dropdown__content, .wds-dropdown.wds-has-dark-shadow .wds-dropdown__content {\n border: 0; }\n .wds-dropdown.wds-is-flipped::before, .wds-dropdown.wds-is-flipped::after {\n bottom: unset;\n top: -1px; }\n .wds-dropdown.wds-is-flipped::before {\n border-bottom-color: transparent;\n border-top-color: #ccc; }\n .wds-dropdown.wds-is-flipped::after {\n border-bottom-color: transparent;\n border-top-color: #fff; }\n .wds-dropdown.wds-is-flipped .wds-dropdown__content {\n bottom: 100%;\n top: unset; }\n\n.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 {\n margin-right: 0; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 > a {\n padding-right: 18px;\n display: flex;\n justify-content: space-between; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-chevron {\n transform: rotate(-90deg);\n margin-left: 18px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent {\n position: relative; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-sticked-to-parent .wds-dropdown-level-2__content {\n top: auto;\n bottom: -8px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content {\n background-color: #fff;\n border: 1px solid #ccc;\n border-radius: 4px;\n display: none;\n left: 100%;\n padding: 7px 0;\n position: absolute;\n top: -8px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content .wds-list.wds-is-linked > li > a {\n font-size: 12px; }\n .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2.wds-is-active .wds-dropdown-level-2__content, .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:not(.wds-is-touch-device):hover .wds-dropdown-level-2__content {\n display: block; }\n",""])},function(e,t,n){e.exports={description:"Basic Dropdown component\n",displayName:"Dropdown",methods:[],props:[{type:{name:"union",value:[{name:"func"},{name:"string"},{name:"node"}]},required:!0,description:"React Component to display as a dropdown toggle",tags:{},name:"toggle"},{type:{name:"bool"},required:!1,description:"Whether or nor not dropdown should automatically flip when it's near the bottom of the viewport",defaultValue:{value:"false",computed:!1},tags:{},name:"canFlip"},{type:{name:"node"},required:!1,description:"React Component to display as the Dropdown Content",defaultValue:{value:"null",computed:!1},tags:{},name:"children"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"HTML classes to add to content element",defaultValue:{value:"''",computed:!1},tags:{},name:"contentClassName"},{type:{name:"bool"},required:!1,description:"Should dropdown content be scrollable",defaultValue:{value:"false",computed:!1},tags:{},name:"contentScrollable"},{type:{name:"bool"},required:!1,description:"Should dropdown content be left-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownLeftAligned"},{type:{name:"bool"},required:!1,description:"Should dropdown content be right-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownRightAligned"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a drop shadow (darker than the one produced by hasShadow)",defaultValue:{value:"false",computed:!1},tags:{},name:"hasDarkShadow"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a slight drop shadow",defaultValue:{value:"false",computed:!1},tags:{},name:"hasShadow"},{type:{name:"enum",value:[{value:"'dropdown-tiny'",computed:!1},{value:"'menu-control-tiny'",computed:!1}]},required:!1,description:"The icon to use for the dropdown chevron",defaultValue:{value:"'menu-control-tiny'",computed:!1},tags:{},name:"iconName"},{type:{name:"bool"},required:!1,description:"is active",defaultValue:{value:"false",computed:!1},tags:{},name:"isActive"},{type:{name:"bool"},required:!1,description:"Is it a nested dropdown",defaultValue:{value:"false",computed:!1},tags:{},name:"isLevel2"},{type:{name:"bool"},required:!1,description:"If dropdown should not be hoverable",defaultValue:{value:"false",computed:!1},tags:{},name:"isNotHoverable"},{type:{name:"bool"},required:!1,description:"if the top of nested dropdown content should be positioned at the same height as toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"isStickedToParent"},{type:{name:"bool"},required:!1,description:"Should chevron on the top of dropdown content be hidden",defaultValue:{value:"false",computed:!1},tags:{},name:"noChevron"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be closed",defaultValue:{value:"null",computed:!1},tags:{},name:"onClose"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be hovered",defaultValue:{value:"null",computed:!1},tags:{},name:"onMouseEnter"},{type:{name:"shape",value:{href:{name:"string",required:!1}}},required:!1,description:"HTML attributes to add to toggle",defaultValue:{value:"{}",computed:!1},tags:{},name:"toggleAttrs"},{type:{name:"string"},required:!1,description:"HTML classes to add to toggle",defaultValue:{value:"''",computed:!1},tags:{},name:"toggleClassName"}],doclets:{},tags:{},examples:n(740)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"\n

I am a text inside dropdown!

\n",settings:{},evalInContext:o},{type:"markdown",content:"Dropdown using dropdown-tiny chevron:"},{type:"code",content:'\n

I am a text inside dropdown!

\n',settings:{},evalInContext:o},{type:"markdown",content:"Nested dropdown:"},{type:"code",content:'\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n',settings:{},evalInContext:o}]},function(e,t,n){e.exports={description:"",displayName:"StyledDropdown",methods:[],props:[{type:{name:"union",value:[{name:"func"},{name:"string"},{name:"node"}]},required:!0,description:"React Component to display as a dropdown toggle",tags:{},name:"toggle"},{type:{name:"bool"},required:!1,description:"Whether or nor not dropdown should automatically flip when it's near the bottom of the viewport",defaultValue:{value:"false",computed:!1},tags:{},name:"canFlip"},{type:{name:"node"},required:!1,description:"React Component to display as the Dropdown Content",defaultValue:{value:"null",computed:!1},tags:{},name:"children"},{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"HTML classes to add to content element",defaultValue:{value:"''",computed:!1},tags:{},name:"contentClassName"},{type:{name:"bool"},required:!1,description:"Should dropdown content be scrollable",defaultValue:{value:"false",computed:!1},tags:{},name:"contentScrollable"},{type:{name:"bool"},required:!1,description:"Should dropdown content be left-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownLeftAligned"},{type:{name:"bool"},required:!1,description:"Should dropdown content be right-aligned with the dropdown toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"dropdownRightAligned"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a drop shadow (darker than the one produced by hasShadow)",defaultValue:{value:"false",computed:!1},tags:{},name:"hasDarkShadow"},{type:{name:"bool"},required:!1,description:"Whether or not dropdown should have a slight drop shadow",defaultValue:{value:"false",computed:!1},tags:{},name:"hasShadow"},{type:{name:"enum",value:[{value:"'dropdown-tiny'",computed:!1},{value:"'menu-control-tiny'",computed:!1}]},required:!1,description:"The icon to use for the dropdown chevron",defaultValue:{value:"'menu-control-tiny'",computed:!1},tags:{},name:"iconName"},{type:{name:"bool"},required:!1,description:"is active",defaultValue:{value:"false",computed:!1},tags:{},name:"isActive"},{type:{name:"bool"},required:!1,description:"Is it a nested dropdown",defaultValue:{value:"false",computed:!1},tags:{},name:"isLevel2"},{type:{name:"bool"},required:!1,description:"If dropdown should not be hoverable",defaultValue:{value:"false",computed:!1},tags:{},name:"isNotHoverable"},{type:{name:"bool"},required:!1,description:"if the top of nested dropdown content should be positioned at the same height as toggle",defaultValue:{value:"false",computed:!1},tags:{},name:"isStickedToParent"},{type:{name:"bool"},required:!1,description:"Should chevron on the top of dropdown content be hidden",defaultValue:{value:"false",computed:!1},tags:{},name:"noChevron"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be closed",defaultValue:{value:"null",computed:!1},tags:{},name:"onClose"},{type:{name:"func"},required:!1,description:"Function to call when dropdown will be hovered",defaultValue:{value:"null",computed:!1},tags:{},name:"onMouseEnter"},{type:{name:"shape",value:{href:{name:"string",required:!1}}},required:!1,description:"HTML attributes to add to toggle",defaultValue:{value:"{}",computed:!1},tags:{},name:"toggleAttrs"},{type:{name:"string"},required:!1,description:"HTML classes to add to toggle",defaultValue:{value:"''",computed:!1},tags:{},name:"toggleClassName"}],doclets:{},examples:n(742)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"\n

I am a text inside dropdown!

\n",settings:{},evalInContext:o},{type:"markdown",content:"Dropdown using dropdown-tiny chevron:"},{type:"code",content:'\n

I am a text inside dropdown!

\n',settings:{},evalInContext:o},{type:"markdown",content:"Nested dropdown:"},{type:"code",content:'\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n

I am a text inside dropdown!

\n \n

I am a text inside dropdown!

\n',settings:{},evalInContext:o}]},function(e,t,n){var a=n(744);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,".expandable-text__expand {\n /* unstyle button */\n background: none;\n border: 0;\n cursor: pointer;\n display: inline;\n font: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0; }\n .expandable-text__expand:active {\n outline: 0; }\n",""])},function(e,t,n){e.exports={description:"ExpandableText component can be used to temporarily limit text showed to the user.\nIt has a button used to fully expand the text.\nIf the source text is shorter than the limit the button do not show.\n\nBoth button label and string used to ellipsis has to be configured.\nButton and the text itself can be syled with classes passed to the component.\n",displayName:"ExpandableText",methods:[],props:[{type:{name:"number"},required:!0,description:"Additional class name",tags:{},name:"characterLimit"},{type:{name:"string"},required:!0,description:"Label used on the expand button",tags:{},name:"expandLabel"},{type:{name:"string"},required:!0,description:"Full text to display",tags:{},name:"text"},{type:{name:"string"},required:!1,description:"Character limit",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"string"},required:!1,description:"Ellipsis (defaults to `…`)",defaultValue:{value:"'\\u2026'",computed:!1},tags:{},name:"ellipsis"},{type:{name:"string"},required:!1,description:"Additional class name for the expand button",defaultValue:{value:"''",computed:!1},tags:{},name:"expandClassName"}],doclets:{},tags:{},examples:n(746)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"",settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function FandomBackgroundImage(e){var t=e.className,n=e.width,a=_objectWithoutProperties(e,["className","width"]),o=Math.floor(9*n/16);return r.a.createElement("svg",_extends({className:t,width:n,height:o,viewBox:"0 0 322 182",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink"},a),r.a.createElement("defs",null,r.a.createElement("path",{id:"fandom-background-image-a",d:"M0 0h322v181.125H0z"})),r.a.createElement("g",{fill:"none",fillRule:"evenodd"},r.a.createElement("mask",{id:"fandom-background-image-b",fill:"#fff"},r.a.createElement("use",{xlinkHref:"#fandom-background-image-a"})),r.a.createElement("use",{fill:"#00D6D6",xlinkHref:"#fandom-background-image-a"}),r.a.createElement("g",{fill:"#002A32",opacity:".07",mask:"url(#fandom-background-image-b)"},r.a.createElement("path",{d:"M220.746 101.305c0 1.17-.457 2.29-1.27 3.122l-53.435 54.578c-.9.908-1.81 1.315-2.94 1.315-1.17 0-2.2-.444-3.07-1.32l-3.77-3.607a1.695 1.695 0 0 1-.03-2.402l61.67-62.86c1.05-1.07 2.86-.32 2.86 1.19v10zm-68.525 41.157l-3.05 2.783a2.52 2.52 0 0 1-3.48-.078l-40.66-40.454a5.465 5.465 0 0 1-1.6-3.86v-7.56c0-2.722 3.26-4.094 5.19-2.18l43.17 42.947c.75.756 2.02 2.315 2.02 4.2 0 1.2-.27 2.902-1.56 4.202zm-36.34-78.29l13.99-14.086a1.66 1.66 0 0 1 2.36 0l46.85 47.188c5.02 5.053 5.02 13.244 0 18.296l-13.98 14.082a1.66 1.66 0 0 1-2.36 0l-46.84-47.19c-2.41-2.43-3.74-5.678-3.74-9.148 0-3.465 1.33-6.712 3.74-9.14zm55.43 8.07l14.62-14.726c2.85-2.867 6.82-4.218 10.93-3.647 2.88.4 5.5 1.9 7.56 3.98l14.81 14.91c.65.65.65 1.72 0 2.38L196.7 97.81a1.663 1.663 0 0 1-2.363 0L171.31 74.62a1.692 1.692 0 0 1 0-2.38zm58.14-2.797l-32.61-33.408a3.422 3.422 0 0 0-4.9-.01l-25.86 26.298a5.097 5.097 0 0 1-7.26.02l-25.86-26.02a3.424 3.424 0 0 0-4.85-.018L94.8 69.367a6.024 6.024 0 0 0-1.8 4.296v31.307c0 1.6.63 3.135 1.755 4.267l64.92 65.363a3.425 3.425 0 0 0 4.87-.002l64.862-65.363a6.055 6.055 0 0 0 1.753-4.265V73.673c0-1.58-.617-3.1-1.718-4.228z"}),r.a.createElement("path",{d:"M248.557 243.388a6.624 6.624 0 0 1-1.886 4.632l-79.28 80.987c-1.34 1.347-2.69 1.95-4.37 1.95-1.73 0-3.26-.66-4.55-1.958l-5.59-5.36a2.517 2.517 0 0 1-.06-3.57l91.51-93.29c1.56-1.59 4.25-.48 4.25 1.75v14.83zm-101.68 61.07l-4.536 4.13a3.735 3.735 0 0 1-5.16-.115l-60.34-60.03a8.074 8.074 0 0 1-2.37-5.727V231.5c0-4.04 4.84-6.077 7.69-3.237l64.05 63.727c1.12 1.123 3 3.436 3 6.232 0 1.78-.4 4.308-2.31 6.237zm-53.93-116.17l20.752-20.903a2.46 2.46 0 0 1 3.5 0l69.51 70.02c7.44 7.5 7.44 19.653 0 27.15l-20.74 20.895c-.97.975-2.54.975-3.51 0l-69.51-70.022c-3.58-3.606-5.55-8.426-5.55-13.575 0-5.142 1.97-9.96 5.54-13.565zm82.255 11.972l21.692-21.85c4.23-4.254 10.117-6.26 16.212-5.41 4.276.594 8.16 2.83 11.21 5.905l21.965 22.125c.97.975.97 2.555 0 3.532l-33.4 33.648c-.96.973-2.54.973-3.5 0l-34.16-34.42a2.505 2.505 0 0 1 0-3.53zm86.26-4.148l-48.38-49.573a5.084 5.084 0 0 0-7.278-.02l-38.37 39.02a7.565 7.565 0 0 1-10.774.03l-38.38-38.62a5.088 5.088 0 0 0-7.2-.03l-49.43 49.06a8.978 8.978 0 0 0-2.65 6.37v46.45c0 2.372.936 4.65 2.605 6.33l96.33 96.99a5.088 5.088 0 0 0 7.23 0l96.244-96.99a9.015 9.015 0 0 0 2.6-6.33v-46.44c0-2.35-.92-4.6-2.55-6.277zM74.452-61.735c0-1.733.68-3.397 1.887-4.63l79.28-80.988c1.34-1.347 2.69-1.95 4.37-1.95 1.73 0 3.26.66 4.55 1.958l5.59 5.352c1.01.963 1.03 2.57.06 3.565l-91.5 93.286c-1.56 1.59-4.25.477-4.25-1.755v-14.838zm101.68-61.07l4.537-4.13a3.735 3.735 0 0 1 5.16.115l60.34 60.03a8.078 8.078 0 0 1 2.37 5.728v11.215c0 4.04-4.84 6.077-7.69 3.237l-64.05-63.727c-1.12-1.123-3-3.436-3-6.232 0-1.78.4-4.3 2.31-6.23zm53.93 116.17L209.31 14.268a2.464 2.464 0 0 1-3.504 0l-69.517-70.02c-7.45-7.498-7.45-19.653 0-27.15l20.74-20.895a2.46 2.46 0 0 1 3.5 0l69.51 70.023c3.58 3.605 5.55 8.426 5.55 13.574 0 5.142-1.97 9.96-5.54 13.565zM147.81-18.607l-21.692 21.85c-4.23 4.255-10.117 6.26-16.212 5.412-4.276-.595-8.16-2.832-11.21-5.906L76.728-19.38a2.507 2.507 0 0 1 0-3.532l33.403-33.646a2.472 2.472 0 0 1 3.51 0l34.17 34.418c.97.976.97 2.557 0 3.53zM61.55-14.46l48.38 49.576a5.086 5.086 0 0 0 7.278.013l38.37-39.02a7.556 7.556 0 0 1 10.774-.03l38.38 38.61a5.079 5.079 0 0 0 7.2.02l49.43-49.06a8.984 8.984 0 0 0 2.65-6.38v-46.45a8.97 8.97 0 0 0-2.605-6.33l-96.33-96.99a5.088 5.088 0 0 0-7.23 0L61.6-73.5a8.986 8.986 0 0 0-2.6 6.327v46.44c0 2.348.915 4.6 2.55 6.274zM8.612 177.558a6.624 6.624 0 0 1-4.632-1.886l-80.987-79.285c-1.347-1.338-1.95-2.688-1.95-4.37 0-1.734.66-3.266 1.958-4.557l5.36-5.59a2.515 2.515 0 0 1 3.57-.058l93.29 91.505c1.59 1.558.48 4.243-1.75 4.243H8.62zm-61.07-101.68l-4.13-4.536a3.74 3.74 0 0 1 .115-5.164L3.557 5.83a8.074 8.074 0 0 1 5.726-2.378H20.5c4.04 0 6.077 4.837 3.237 7.69L-39.99 75.2c-1.123 1.113-3.436 2.993-6.232 2.993-1.78 0-4.308-.402-6.237-2.317zm116.17-53.93L84.615 42.7a2.464 2.464 0 0 1 0 3.504l-70.02 69.517c-7.5 7.45-19.653 7.45-27.15 0L-33.45 94.98a2.468 2.468 0 0 1 0-3.507L36.572 21.96c3.606-3.58 8.426-5.55 13.575-5.55 5.142 0 9.96 1.967 13.565 5.54zM51.74 104.202l21.85 21.692c4.254 4.23 6.26 10.117 5.41 16.212-.594 4.276-2.83 8.16-5.905 11.21L50.97 175.282c-.975.97-2.555.97-3.532 0L13.79 141.878a2.47 2.47 0 0 1 0-3.507l34.42-34.16a2.505 2.505 0 0 1 3.53 0zm4.148 86.26l49.573-48.38c2.05-2 2.06-5.272.02-7.278l-39.02-38.37a7.565 7.565 0 0 1-.03-10.774l38.62-38.38c2-1.987 2.01-5.202.03-7.2L56.01-9.35A8.997 8.997 0 0 0 49.63-12H3.174a8.974 8.974 0 0 0-6.33 2.605l-96.99 96.33a5.086 5.086 0 0 0 .002 7.23l96.99 96.244a9.009 9.009 0 0 0 6.328 2.6h46.44a9 9 0 0 0 6.274-2.55zM313.735 3.452c1.733 0 3.397.68 4.63 1.887l80.988 79.28c1.347 1.34 1.95 2.69 1.95 4.37 0 1.73-.66 3.26-1.958 4.55l-5.352 5.59a2.511 2.511 0 0 1-3.565.06l-93.286-91.5c-1.59-1.56-.477-4.25 1.755-4.25h14.838zm61.07 101.68l4.13 4.537a3.735 3.735 0 0 1-.115 5.16l-60.03 60.34a8.078 8.078 0 0 1-5.728 2.37h-11.215c-4.04 0-6.077-4.84-3.237-7.69l63.727-64.06c1.123-1.12 3.436-3 6.232-3 1.78 0 4.3.4 6.23 2.312zm-116.17 53.93l-20.903-20.75a2.466 2.466 0 0 1 0-3.505l70.02-69.517c7.498-7.444 19.653-7.444 27.15 0l20.895 20.743c.975.97.975 2.54 0 3.507l-70.023 69.515c-3.605 3.578-8.426 5.55-13.574 5.55-5.142 0-9.96-1.968-13.565-5.542zm11.972-82.254l-21.85-21.692c-4.255-4.23-6.26-10.117-5.412-16.212.595-4.276 2.832-8.16 5.906-11.21L271.38 5.73a2.507 2.507 0 0 1 3.532 0l33.646 33.402c.975.968.975 2.54 0 3.507L274.14 76.8a2.508 2.508 0 0 1-3.53 0zm-4.148-86.26l-49.58 48.38a5.084 5.084 0 0 0-.02 7.278l39.02 38.37a7.574 7.574 0 0 1 .03 10.774l-38.61 38.38a5.088 5.088 0 0 0-.03 7.2l49.05 49.43a8.978 8.978 0 0 0 6.37 2.65h46.46c2.37 0 4.65-.936 6.33-2.605l96.99-96.33a5.08 5.08 0 0 0-.01-7.23L325.5-9.4a8.986 8.986 0 0 0-6.327-2.6h-46.44c-2.348 0-4.6.915-6.274 2.55z"}))))};s.propTypes={className:i.a.string,width:i.a.number},s.defaultProps={className:"",width:322},t.default=s},function(e,t,n){e.exports={description:"An image background that can be used as a sample image.\n",displayName:"FandomBackgroundImage",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"number"},required:!1,description:"Image width",defaultValue:{value:"322",computed:!1},tags:{},name:"width"}],doclets:{},tags:{},examples:n(749)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:"",settings:{},evalInContext:o},{type:"markdown",content:"Custom width and className:"},{type:"code",content:"
\n\t\n
",settings:{},evalInContext:o}]},function(e,t,n){var a=n(751);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-fandom-content-well {\n box-sizing: border-box; }\n @media only screen and (max-width: 767px) {\n .wds-fandom-content-well {\n margin: 0 18px; } }\n @media only screen and (min-width: 768px) {\n .wds-fandom-content-well {\n margin: 0 auto; } }\n @media only screen and (min-width: 768px) and (max-width: 1023px) {\n .wds-fandom-content-well {\n width: 732px; } }\n @media only screen and (min-width: 1024px) and (max-width: 1279px) {\n .wds-fandom-content-well {\n width: 988px; } }\n @media only screen and (min-width: 1280px) {\n .wds-fandom-content-well {\n width: 1244px; } }\n",""])},function(e,t,n){e.exports={description:"FandomContentWell wraps `children` in `wds-content-well($use-xxlarge-breakpoint: false)` CSS mixin.\n",displayName:"FandomContentWell",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},tags:{},examples:n(753)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Open this example in the new page to see the difference:"},{type:"code",content:'\n\t
FandomContentWell
\n',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(755);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function Fieldset(e){var t=e.className,n=e.children,a=_objectWithoutProperties(e,["className","children"]);return r.a.createElement("div",_extends({className:"wds-fieldset ".concat(t)},a),n)};s.propTypes={children:i.a.node,className:i.a.string},s.defaultProps={children:null,className:""},t.default=s},function(e,t,n){var a=n(756);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,".wds-fieldset {\n background-color: #fff;\n border: 0;\n display: flex;\n flex-direction: column;\n margin-bottom: 6px;\n padding: 16px 0; }\n",""])},function(e,t,n){e.exports={description:"",displayName:"Fieldset",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"}],doclets:{},examples:n(758)}},function(e,t,n){var a={react:n(0)},r=n(4).bind(null,a),o=n(5).bind(null,"var React = require('react');",r);e.exports=[{type:"markdown",content:"Defaults:"},{type:"code",content:'
\n\t\n\t\n
',settings:{},evalInContext:o}]},function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(1),i=n.n(o);n(760);function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a=0||(r[n]=e[n]);return r}var s=function FloatingButton(e){var t=e.className,n=e.href,a=e.children,o=_objectWithoutProperties(e,["className","href","children"]),i=["wds-floating-button",t].filter(function(e){return e}).join(" ");return n?r.a.createElement("a",_extends({href:n,className:i},o),a):r.a.createElement("button",_extends({className:i},o),a)};s.propTypes={children:i.a.node,className:i.a.string,disabled:i.a.bool,href:i.a.string,onClick:i.a.func},s.defaultProps={children:null,className:"",disabled:!1,href:null,onClick:function onClick(){}},t.default=s},function(e,t,n){var a=n(761);"string"==typeof a&&(a=[[e.i,a,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(10)(a,r);a.locals&&(e.exports=a.locals)},function(e,t,n){(e.exports=n(9)(!1)).push([e.i,"/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n/**\n* Implemenation taken from http://www.antimath.info/css/sass-sqrt-function/\n*/\n/**\n* Implementation taken from http://alienryderflex.com/hsp.html\n*/\n.wds-floating-button {\n align-items: center;\n background: #fff;\n border-radius: 50%;\n border: 0;\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.2);\n display: flex;\n height: 36px;\n justify-content: center;\n margin: 0;\n outline: none;\n padding: 0;\n transition-duration: 300ms;\n transition-property: box-shadow;\n width: 36px; }\n .wds-floating-button:not([disabled]), .wds-floating-button:not(.wds-is-disabled) {\n cursor: pointer; }\n .wds-floating-button:not([disabled]):hover, .wds-floating-button:not(.wds-is-disabled):hover {\n box-shadow: 0 0 10px 0 rgba(26, 26, 26, 0.4); }\n\n.wds-floating-button-group {\n display: inline-flex; }\n .wds-floating-button-group.wds-is-vertical {\n flex-flow: column; }\n .wds-floating-button-group:not(.wds-is-vertical) > .wds-floating-button:not(:first-child) {\n margin-left: 8px; }\n .wds-floating-button-group.wds-is-vertical > .wds-floating-button:not(:first-child) {\n margin-top: 8px; }\n",""])},function(e,t,n){e.exports={description:"Floating button (icons-only)\n",displayName:"FloatingButton",methods:[],props:[{type:{name:"string"},required:!1,description:"Additional class name",defaultValue:{value:"''",computed:!1},tags:{},name:"className"},{type:{name:"bool"},required:!1,description:"Disabled attribute for the `