From b1f8125f5f13f02ba385da76bd5a4a2d92222750 Mon Sep 17 00:00:00 2001 From: Frankie Yan Date: Fri, 7 May 2021 16:16:45 +0800 Subject: [PATCH] feat: Rename Text stack to align with Design library (#513) --- CHANGELOG.md | 1 + docs/iframe.html | 2 +- docs/main.10470b2d.iframe.bundle.js | 1 - docs/main.364064a5.iframe.bundle.js | 1 + package-lock.json | 2 +- package.json | 2 +- .../base-field/base-field.module.css | 2 +- src/new-components/base-field/base-field.tsx | 2 +- src/new-components/box/box.module.css | 2 +- src/new-components/default-styles.less | 8 +- src/new-components/heading/heading.module.css | 16 +-- .../select-field/select-field.module.css | 6 +- .../text-field/text-field.module.css | 6 +- src/new-components/text/text.module.css | 22 ++-- src/new-components/text/text.stories.tsx | 100 ++++++++---------- src/new-components/text/text.tsx | 8 +- 16 files changed, 83 insertions(+), 98 deletions(-) delete mode 100644 docs/main.10470b2d.iframe.bundle.js create mode 100644 docs/main.364064a5.iframe.bundle.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c15e0d1e..1a75affc1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ Reactist follows [semantic versioning](https://semver.org/) and doesn't introduc ## v9.2.0-beta.10 +- [Breaking] `Text` component now has its `size` attribute changed to accept `caption`, `copy`, `body`, and `subtitle`. - [Fix] `Columns` component will now stretch within a flex container ## v9.2.0-beta.9 diff --git a/docs/iframe.html b/docs/iframe.html index 00c65b4a4..9433e0f18 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -245,4 +245,4 @@ - window['FRAMEWORK_OPTIONS'] = {}; \ No newline at end of file + window['FRAMEWORK_OPTIONS'] = {}; \ No newline at end of file diff --git a/docs/main.10470b2d.iframe.bundle.js b/docs/main.10470b2d.iframe.bundle.js deleted file mode 100644 index d7863eea3..000000000 --- a/docs/main.10470b2d.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{115:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(656),__webpack_require__(24),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_dom=__webpack_require__(51),react_dom_default=__webpack_require__.n(react_dom),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),components_button=__webpack_require__(16);__webpack_require__(2785);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _defineProperties(target,props){for(var i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Box=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_12__.a)((function Box(_ref,ref){var _ref2,_ref3,_ref4,_ref5,_ref$component=_ref.component,component=void 0===_ref$component?"div":_ref$component,_ref$position=_ref.position,position=void 0===_ref$position?"static":_ref$position,_ref$display=_ref.display,display=void 0===_ref$display?"block":_ref$display,_ref$flexDirection=_ref.flexDirection,flexDirection=void 0===_ref$flexDirection?"row":_ref$flexDirection,flexWrap=_ref.flexWrap,flexGrow=_ref.flexGrow,flexShrink=_ref.flexShrink,alignItems=_ref.alignItems,justifyContent=_ref.justifyContent,overflow=_ref.overflow,width=_ref.width,height=_ref.height,background=_ref.background,border=_ref.border,borderRadius=_ref.borderRadius,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,padding=_ref.padding,paddingY=_ref.paddingY,paddingX=_ref.paddingX,paddingTop=_ref.paddingTop,paddingRight=_ref.paddingRight,paddingBottom=_ref.paddingBottom,paddingLeft=_ref.paddingLeft,className=_ref.className,children=_ref.children,props=_objectWithoutProperties(_ref,["component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","className","children"]),resolvedPaddingTop=null!==(_ref2=null!=paddingTop?paddingTop:paddingY)&&void 0!==_ref2?_ref2:padding,resolvedPaddingRight=null!==(_ref3=null!=paddingRight?paddingRight:paddingX)&&void 0!==_ref3?_ref3:padding,resolvedPaddingBottom=null!==(_ref4=null!=paddingBottom?paddingBottom:paddingY)&&void 0!==_ref4?_ref4:padding,resolvedPaddingLeft=null!==(_ref5=null!=paddingLeft?paddingLeft:paddingX)&&void 0!==_ref5?_ref5:padding,isFlex="flex"===display||"inlineFlex"===display;return react__WEBPACK_IMPORTED_MODULE_10__.createElement(component,_objectSpread(_objectSpread({},props),{},{className:classnames__WEBPACK_IMPORTED_MODULE_11___default()(className,_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a.box,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"display",display),"static"!==position?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"position",position):null,null!=minWidth?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"minWidth",String(minWidth)):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"maxWidth",maxWidth),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingTop",resolvedPaddingTop),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingRight",resolvedPaddingRight),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingBottom",resolvedPaddingBottom),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingLeft",resolvedPaddingLeft),isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexDirection",flexDirection):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexWrap",flexWrap):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"alignItems",alignItems):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"justifyContent",justifyContent):null,null!=flexShrink?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexShrink",String(flexShrink)):null,null!=flexGrow?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexGrow",String(flexGrow)):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"overflow",overflow),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"width",width),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"height",height),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"bg",background),"none"!==borderRadius?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"borderRadius",borderRadius):null,"none"!==border?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"border",border):null)||void 0,ref:ref}),children)}))},1562:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2622);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1563:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2631);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1598:function(module,exports,__webpack_require__){__webpack_require__(1599),__webpack_require__(1858),__webpack_require__(1859),__webpack_require__(2888),__webpack_require__(2887),__webpack_require__(2892),module.exports=__webpack_require__(2604)},16:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),tooltip_tooltip=__webpack_require__(2907);__webpack_require__(2773);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var button_Button=react_default.a.forwardRef((function Button(_ref,ref){var _ref$type=_ref.type,type=void 0===_ref$type?"button":_ref$type,variant=_ref.variant,_ref$size=_ref.size,size=void 0===_ref$size?"default":_ref$size,_ref$loading=_ref.loading,loading=void 0!==_ref$loading&&_ref$loading,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,tooltip=_ref.tooltip,onClick=_ref.onClick,children=_ref.children,props=_objectWithoutProperties(_ref,["type","variant","size","loading","disabled","tooltip","onClick","children"]),className=classnames_default()("reactist_button",variant?"reactist_button--".concat(variant):null,"default"!==size?"reactist_button--".concat(size):null,{"reactist_button--loading":loading},props.className),button=react_default.a.createElement("button",_extends({},props,{ref:ref,type:type,className:className,"aria-disabled":disabled||loading,onClick:disabled||loading?void 0:onClick}),children);return tooltip?react_default.a.createElement(tooltip_tooltip.a,{content:tooltip},button):button}));button_Button.displayName="Button",button_Button.defaultProps={size:"default",loading:!1,disabled:!1};try{button_Button.displayName="Button",button_Button.__docgenInfo={description:"",displayName:"Button",props:{loading:{defaultValue:{value:"false"},description:"Loading style. When true it disables the button, but it also adds a visual indication of\nsome in-progress operation going on.",name:"loading",required:!1,type:{name:"boolean | undefined"}},variant:{defaultValue:null,description:"Controls visually how the button shows up from a predefined set of kinds of buttons.",name:"variant",required:!1,type:{name:'"primary" | "secondary" | "danger" | "link" | undefined'}},size:{defaultValue:{value:"default"},description:"The size of the button. If not provided it shows up in a normal size.",name:"size",required:!1,type:{name:'"default" | "small" | "large" | undefined'}},tooltip:{defaultValue:null,description:"Tooltip that is displayed on hover.\n\nThis replaces `title` which is not supported for these buttons to avoid confusion.",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/button/button.tsx#Button"]={docgenInfo:button_Button.__docgenInfo,name:"Button",path:"src/components/button/button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=button_Button},1700:function(module,exports){},1782:function(module,exports){},1859:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(1062)},188:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return forwardRefWithAs}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0);function forwardRefWithAs(render){return react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(render)}try{forwardRefWithAs.displayName="forwardRefWithAs",forwardRefWithAs.__docgenInfo={description:"",displayName:"forwardRefWithAs",props:{displayName:{defaultValue:null,description:"",name:"displayName",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/type-helpers.tsx#forwardRefWithAs"]={docgenInfo:forwardRefWithAs.__docgenInfo,name:"forwardRefWithAs",path:"src/new-components/type-helpers.tsx#forwardRefWithAs"})}catch(__react_docgen_typescript_loader_error){}},1916:function(module,exports){},21:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return getClassNames})),__webpack_require__.d(__webpack_exports__,"b",(function(){return mapResponsiveProp}));__webpack_require__(473),__webpack_require__(152),__webpack_require__(2609),__webpack_require__(269);var prefix=["","tablet-","desktop-"];function getClassNames(styles,property,value){if(!value)return null;var classList="string"==typeof value?[styles["".concat(property,"-").concat(value)]]:value.map((function(s,i){return styles["".concat(prefix[i]).concat(property,"-").concat(s)]}));return classList}function mapResponsiveProp(fromValue,mapper){return"string"==typeof fromValue||"number"==typeof fromValue||"boolean"==typeof fromValue?mapper(fromValue):Array.isArray(fromValue)?fromValue.map(mapper):void 0}},251:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(244),__webpack_require__(1491);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(961),__webpack_require__(475),__webpack_require__(2694);function getInitials(name){if(!name)return"";var seed=name.trim().split(" "),firstInitial=seed[0],lastInitial=seed[seed.length-1],initials=firstInitial[0];return firstInitial[0]!==lastInitial[0]&&(initials+=lastInitial[0]),initials.toUpperCase()}__webpack_require__(2691);var AVATAR_COLORS=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"],AVATAR_SIZES=["xxs","xs","s","m","l","xl","xxl","xxxl"];function Avatar(_ref){var email,maxIndex,seed,user=_ref.user,avatarUrl=_ref.avatarUrl,_ref$size=_ref.size,size=void 0===_ref$size?"l":_ref$size,className=_ref.className,_ref$colorList=_ref.colorList,colorList=void 0===_ref$colorList?AVATAR_COLORS:_ref$colorList,userInitials=getInitials(user.name)||getInitials(user.email),avatarSize=size&&AVATAR_SIZES.includes(size)?size:"l",avatarClass=classnames_default()("reactist_avatar reactist_avatar_size--".concat(avatarSize),className),style=avatarUrl?{backgroundImage:"url(".concat(avatarUrl,")"),textIndent:"-9999px"}:{backgroundColor:colorList[(email=user.email,maxIndex=colorList.length,seed=email.split("@")[0],(seed.charCodeAt(0)+seed.charCodeAt(seed.length-1)||0)%maxIndex)]};return react_default.a.createElement("div",{className:avatarClass,style:style},userInitials)}Avatar.displayName="Avatar",Avatar.displayName="Avatar";try{Avatar.displayName="Avatar",Avatar.__docgenInfo={description:"",displayName:"Avatar",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}},colorList:{defaultValue:null,description:"",name:"colorList",required:!1,type:{name:"string[] | undefined"}},size:{defaultValue:{value:"l"},description:"",name:"size",required:!1,type:{name:'"l" | "xxs" | "xs" | "s" | "m" | "xl" | "xxl" | "xxxl" | undefined'}},avatarUrl:{defaultValue:null,description:"",name:"avatarUrl",required:!1,type:{name:"string | undefined"}},user:{defaultValue:null,description:"",name:"user",required:!0,type:{name:"{ name?: string | undefined; email: string; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/avatar/avatar.tsx#Avatar"]={docgenInfo:Avatar.__docgenInfo,name:"Avatar",path:"src/components/avatar/avatar.tsx#Avatar"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=Avatar},2601:function(module,exports,__webpack_require__){var content=__webpack_require__(2602);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2602:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story {\n margin: 0 40px 0 40px;\n padding: 20px;\n background-color: white;\n}\n","",{version:3,sources:["webpack://stories/components/styles/story.less"],names:[],mappings:"AAAA;EACI,qBAAA;EACA,aAAA;EACA,uBAAA;AACJ",sourcesContent:[".story {\n margin: 0 40px 0 40px;\n padding: 20px;\n background-color: white;\n\n // checkered background\n // @gray: whitesmoke;\n // background-image: linear-gradient(45deg, @gray 25%, transparent 25%), linear-gradient(-45deg, @gray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, @gray 75%), linear-gradient(-45deg, transparent 75%, @gray 75%);\n // background-size: 20px 20px;\n // background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2604:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(1062).configure)([__webpack_require__(2605),__webpack_require__(2634)],module,!1)}).call(this,__webpack_require__(264)(module))},2605:function(module,exports,__webpack_require__){var map={"./new-components/box/box.stories.tsx":2606,"./new-components/columns/columns.stories.tsx":2626,"./new-components/heading/heading.stories.tsx":2630,"./new-components/inline/inline.stories.tsx":2902,"./new-components/stack/stack.stories.tsx":2632,"./new-components/text/text.stories.tsx":2903};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=2605},2606:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(5),_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_box__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(144);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i) {\n return (\n \n \n
One
\n
Two
\n
Three
\n \n \n )\n}"}},InteractivePropsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:'function ResponsiveStory() {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n
One
\n
Two
\n
Three
\n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},ResponsiveStory.parameters);try{InteractivePropsStory.displayName="InteractivePropsStory",InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{position:{defaultValue:null,description:"",name:"position",required:!1,type:{name:'"absolute" | "fixed" | "relative" | "static" | "sticky" | readonly [BoxPosition, BoxPosition] | readonly [BoxPosition, BoxPosition, BoxPosition] | undefined'}},display:{defaultValue:null,description:"",name:"display",required:!1,type:{name:'"none" | "block" | "flex" | "inline" | "inlineBlock" | "inlineFlex" | readonly [BoxDisplay, BoxDisplay] | readonly [BoxDisplay, BoxDisplay, BoxDisplay] | undefined'}},flexDirection:{defaultValue:null,description:"",name:"flexDirection",required:!1,type:{name:'"column" | "row" | readonly [BoxFlexDirection, BoxFlexDirection] | readonly [BoxFlexDirection, BoxFlexDirection, BoxFlexDirection] | undefined'}},flexWrap:{defaultValue:null,description:"",name:"flexWrap",required:!1,type:{name:'"nowrap" | "wrap" | undefined'}},flexGrow:{defaultValue:null,description:"",name:"flexGrow",required:!1,type:{name:"0 | 1 | undefined"}},flexShrink:{defaultValue:null,description:"",name:"flexShrink",required:!1,type:{name:"0 | undefined"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:'"center" | "flexEnd" | "flexStart" | readonly [BoxAlignItems, BoxAlignItems] | readonly [BoxAlignItems, BoxAlignItems, BoxAlignItems] | undefined'}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:'"center" | "flexEnd" | "flexStart" | "spaceBetween" | readonly [BoxJustifyContent, BoxJustifyContent] | readonly [BoxJustifyContent, BoxJustifyContent, BoxJustifyContent] | undefined'}},overflow:{defaultValue:null,description:"",name:"overflow",required:!1,type:{name:'"hidden" | "visible" | "auto" | "scroll" | undefined'}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:'"full" | undefined'}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:'"full" | undefined'}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"ClassValue"}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/box/box.stories.tsx#InteractivePropsStory"]={docgenInfo:InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/box/box.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}},2608:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._34n6lzh1{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-normal);font-family:inherit;vertical-align:baseline;background-color:transparent}._4O18_OS-{position:absolute}._28SfqXxQ{position:fixed}._25hgucpJ{position:relative}._1z9gRRgL{position:-webkit-sticky;position:sticky}@media (min-width:768px){._165GB3d9{position:absolute}._35BfHjzS{position:fixed}.ToWL2vUd{position:relative}._3Y7tS7ZB{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._1cIKCESH{position:absolute}._2UnmU33s{position:fixed}.Yvv9o15g{position:relative}._1ulmDxJK{position:-webkit-sticky;position:sticky}}._3metZFs3{display:block}.OtqwlC-g{display:flex}.ScnLRsqQ{display:inline}._3p4d3SOr{display:inline-block}._3Wbf3h8F{display:inline-flex}.vZcMBze5{display:none}@media (min-width:768px){.xnym6zKT{display:block}._3lk6GIUC{display:flex}._2lsDHRFI{display:inline}._3_tat_7q{display:inline-block}._2zp0Ysn_{display:inline-flex}._22HipJxo{display:none}}@media (min-width:992px){.egzVdgM-{display:block}._3O-rsskG{display:flex}._2e2_Bdle{display:inline}._1BndqY98{display:inline-block}._3lKbMoNn{display:inline-flex}._2-eAy5iF{display:none}}._1LICbbGA{min-width:0}._11C3KbpS{min-width:220px}._2i8CQCsg{min-width:400px}._2mvYxIBO{min-width:660px}.tUeYcld-{max-width:940px}._3xFf8yMo{min-width:1280px}._1kI7x4VB{max-width:220px}.eLup45J2{max-width:400px}._3Q3oh0wq{max-width:660px}._1m4kNCjr{max-width:940px}.rKzeZFfP{max-width:1280px}._1cIxSJgN{flex-direction:column}._3d82rg2O{flex-direction:row}@media (min-width:768px){._2BCIaaSu{flex-direction:column}._1KZ73hzW{flex-direction:row}}@media (min-width:992px){.AlBpSaFt{flex-direction:column}.szQspntj{flex-direction:row}}._2R_eNJAR{flex-wrap:wrap}._1A8QKWzr{flex-wrap:nowrap}._1BY1l_eA{flex-shrink:0}._2JTESmuO{flex-grow:0}._1IIXp_yM{flex-grow:1}._3Aw6MW6G{align-items:flex-start}._3J7hgDFf{align-items:center}._1PQDcZy6{align-items:flex-end}@media (min-width:768px){._3166iR2s{align-items:flex-start}.QCePjapg{align-items:center}.jjkOQC8r{align-items:flex-end}}@media (min-width:992px){.A0DebJu_{align-items:flex-start}._1isnu434{align-items:center}._3VslwRNK{align-items:flex-end}}._2pEU8SQC{justify-content:flex-start}._1mRUNYls{justify-content:center}._3EDR-URW{justify-content:flex-end}.IXOituOK{justify-content:space-between}@media (min-width:768px){._2d7kRHd7{justify-content:flex-start}._1UzfR6Vf{justify-content:center}._2ImQNbDg{justify-content:flex-end}._16UkMMI6{justify-content:space-between}}@media (min-width:992px){._3cyvD1f5{justify-content:flex-start}._1HcMvcsu{justify-content:center}._33m1Ctuk{justify-content:flex-end}._2bJ7PwH5{justify-content:space-between}}._2VHbvrHg{overflow:hidden}.C08q82uW{overflow:auto}._3jPsBi7a{overflow:visible}._36PWUusV{overflow:scroll}._32U3_pi2{width:100%}._1AR6jtYl{height:100%}._1fcm9eDc{padding-top:var(--reactist-spacing-xsmall)}._2lkiKEWt{padding-top:var(--reactist-spacing-small)}._119wY5KY{padding-top:var(--reactist-spacing-medium)}._2lLLEoa3{padding-top:var(--reactist-spacing-large)}._3MKPysMl{padding-top:var(--reactist-spacing-xlarge)}._2BRtAsyi{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1fWU3n1u{padding-top:var(--reactist-spacing-xsmall)}._3GjsUaeE{padding-top:var(--reactist-spacing-small)}._21yTqsvb{padding-top:var(--reactist-spacing-medium)}._3Qau3vLp{padding-top:var(--reactist-spacing-large)}._3HTGDpML{padding-top:var(--reactist-spacing-xlarge)}._13Qaddpr{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._16jrLfRP{padding-top:var(--reactist-spacing-xsmall)}.Idw94aP3{padding-top:var(--reactist-spacing-small)}._1R8pIf5u{padding-top:var(--reactist-spacing-medium)}._1KblKWWz{padding-top:var(--reactist-spacing-large)}._1Argcyq5{padding-top:var(--reactist-spacing-xlarge)}._3m1DpHzr{padding-top:var(--reactist-spacing-xxlarge)}}._2qsODlQ1{padding-right:var(--reactist-spacing-xsmall)}.J6fFv8Uw{padding-right:var(--reactist-spacing-small)}._3B9cvkFr{padding-right:var(--reactist-spacing-medium)}._31dJKVeK{padding-right:var(--reactist-spacing-large)}.MN3kdPGA{padding-right:var(--reactist-spacing-xlarge)}.hOdAx-DJ{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1zfH8gJo{padding-right:var(--reactist-spacing-xsmall)}.ntzZ3X_i{padding-right:var(--reactist-spacing-small)}._2YK4VfjY{padding-right:var(--reactist-spacing-medium)}.l_EnRFEp{padding-right:var(--reactist-spacing-large)}.ZDEFhvKH{padding-right:var(--reactist-spacing-xlarge)}._2xMDWQvF{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._2SKtOj1H{padding-right:var(--reactist-spacing-xsmall)}._1JFBzLmS{padding-right:var(--reactist-spacing-small)}._1d8OeBwG{padding-right:var(--reactist-spacing-medium)}._1oqWSRHW{padding-right:var(--reactist-spacing-large)}._3hs_npgm{padding-right:var(--reactist-spacing-xlarge)}._2rUd8spK{padding-right:var(--reactist-spacing-xxlarge)}}.QAjpz88e{padding-bottom:var(--reactist-spacing-xsmall)}._27gXF8UK{padding-bottom:var(--reactist-spacing-small)}._1burbc7g{padding-bottom:var(--reactist-spacing-medium)}._1AG-1RI8{padding-bottom:var(--reactist-spacing-large)}._4A7BKhnw{padding-bottom:var(--reactist-spacing-xlarge)}._1zYBan2X{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1q-EYnWe{padding-bottom:var(--reactist-spacing-xsmall)}._3cdY7xQ6{padding-bottom:var(--reactist-spacing-small)}._8ttAhsAQ{padding-bottom:var(--reactist-spacing-medium)}._3o9VZU0a{padding-bottom:var(--reactist-spacing-large)}._31_a_F3n{padding-bottom:var(--reactist-spacing-xlarge)}._2blD9ia6{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._18jTpIXx{padding-bottom:var(--reactist-spacing-xsmall)}.GGgw4UeY{padding-bottom:var(--reactist-spacing-small)}.u8YQor1g{padding-bottom:var(--reactist-spacing-medium)}._1EO13Ldk{padding-bottom:var(--reactist-spacing-large)}.e1feW_Dq{padding-bottom:var(--reactist-spacing-xlarge)}._2nZlnStA{padding-bottom:var(--reactist-spacing-xxlarge)}}._2XOJ9rB5{padding-left:var(--reactist-spacing-xsmall)}._2CeIk2Gc{padding-left:var(--reactist-spacing-small)}._3pHpOf1P{padding-left:var(--reactist-spacing-medium)}._2zWUeqgY{padding-left:var(--reactist-spacing-large)}._3qO66J6_{padding-left:var(--reactist-spacing-xlarge)}._3SwRIaXO{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1ksF6GVY{padding-left:var(--reactist-spacing-xsmall)}._1JYdaVH-{padding-left:var(--reactist-spacing-small)}._1Fi5Oqez{padding-left:var(--reactist-spacing-medium)}._1on5T6VJ{padding-left:var(--reactist-spacing-large)}._2aNsxVAR{padding-left:var(--reactist-spacing-xlarge)}._2ieKTraX{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._39FA-zw4{padding-left:var(--reactist-spacing-xsmall)}._2VuLKwfY{padding-left:var(--reactist-spacing-small)}._13U30dEX{padding-left:var(--reactist-spacing-medium)}.NtbYWZBb{padding-left:var(--reactist-spacing-large)}._3hlXya32{padding-left:var(--reactist-spacing-xlarge)}.vVYLlu05{padding-left:var(--reactist-spacing-xxlarge)}}.acHew4QS{background-color:var(--reactist-bg-default)}._27wTWuhR{background-color:var(--reactist-bg-aside)}._13n6zG49{background-color:var(--reactist-bg-highlight)}._3xE7o7Lc{background-color:var(--reactist-bg-selected)}._1s36b_gH{border-radius:var(--reactist-border-radius-small)}._1SIaqDBP{border-radius:var(--reactist-border-radius-large)}._1-QIwmSO{border:1px solid var(--reactist-framework-border)}",""]),exports.locals={box:"_34n6lzh1","position-absolute":"_4O18_OS-","position-fixed":"_28SfqXxQ","position-relative":"_25hgucpJ","position-sticky":"_1z9gRRgL","tablet-position-absolute":"_165GB3d9","tablet-position-fixed":"_35BfHjzS","tablet-position-relative":"ToWL2vUd","tablet-position-sticky":"_3Y7tS7ZB","desktop-position-absolute":"_1cIKCESH","desktop-position-fixed":"_2UnmU33s","desktop-position-relative":"Yvv9o15g","desktop-position-sticky":"_1ulmDxJK","display-block":"_3metZFs3","display-flex":"OtqwlC-g","display-inline":"ScnLRsqQ","display-inlineBlock":"_3p4d3SOr","display-inlineFlex":"_3Wbf3h8F","display-none":"vZcMBze5","tablet-display-block":"xnym6zKT","tablet-display-flex":"_3lk6GIUC","tablet-display-inline":"_2lsDHRFI","tablet-display-inlineBlock":"_3_tat_7q","tablet-display-inlineFlex":"_2zp0Ysn_","tablet-display-none":"_22HipJxo","desktop-display-block":"egzVdgM-","desktop-display-flex":"_3O-rsskG","desktop-display-inline":"_2e2_Bdle","desktop-display-inlineBlock":"_1BndqY98","desktop-display-inlineFlex":"_3lKbMoNn","desktop-display-none":"_2-eAy5iF","minWidth-0":"_1LICbbGA","minWidth-xsmall":"_11C3KbpS","minWidth-small":"_2i8CQCsg","minWidth-medium":"_2mvYxIBO","minWidth-large":"tUeYcld-","minWidth-xlarge":"_3xFf8yMo","maxWidth-xsmall":"_1kI7x4VB","maxWidth-small":"eLup45J2","maxWidth-medium":"_3Q3oh0wq","maxWidth-large":"_1m4kNCjr","maxWidth-xlarge":"rKzeZFfP","flexDirection-column":"_1cIxSJgN","flexDirection-row":"_3d82rg2O","tablet-flexDirection-column":"_2BCIaaSu","tablet-flexDirection-row":"_1KZ73hzW","desktop-flexDirection-column":"AlBpSaFt","desktop-flexDirection-row":"szQspntj","flexWrap-wrap":"_2R_eNJAR","flexWrap-nowrap":"_1A8QKWzr","flexShrink-0":"_1BY1l_eA","flexGrow-0":"_2JTESmuO","flexGrow-1":"_1IIXp_yM","alignItems-flexStart":"_3Aw6MW6G","alignItems-center":"_3J7hgDFf","alignItems-flexEnd":"_1PQDcZy6","tablet-alignItems-flexStart":"_3166iR2s","tablet-alignItems-center":"QCePjapg","tablet-alignItems-flexEnd":"jjkOQC8r","desktop-alignItems-flexStart":"A0DebJu_","desktop-alignItems-center":"_1isnu434","desktop-alignItems-flexEnd":"_3VslwRNK","justifyContent-flexStart":"_2pEU8SQC","justifyContent-center":"_1mRUNYls","justifyContent-flexEnd":"_3EDR-URW","justifyContent-spaceBetween":"IXOituOK","tablet-justifyContent-flexStart":"_2d7kRHd7","tablet-justifyContent-center":"_1UzfR6Vf","tablet-justifyContent-flexEnd":"_2ImQNbDg","tablet-justifyContent-spaceBetween":"_16UkMMI6","desktop-justifyContent-flexStart":"_3cyvD1f5","desktop-justifyContent-center":"_1HcMvcsu","desktop-justifyContent-flexEnd":"_33m1Ctuk","desktop-justifyContent-spaceBetween":"_2bJ7PwH5","overflow-hidden":"_2VHbvrHg","overflow-auto":"C08q82uW","overflow-visible":"_3jPsBi7a","overflow-scroll":"_36PWUusV","width-full":"_32U3_pi2","height-full":"_1AR6jtYl","paddingTop-xsmall":"_1fcm9eDc","paddingTop-small":"_2lkiKEWt","paddingTop-medium":"_119wY5KY","paddingTop-large":"_2lLLEoa3","paddingTop-xlarge":"_3MKPysMl","paddingTop-xxlarge":"_2BRtAsyi","tablet-paddingTop-xsmall":"_1fWU3n1u","tablet-paddingTop-small":"_3GjsUaeE","tablet-paddingTop-medium":"_21yTqsvb","tablet-paddingTop-large":"_3Qau3vLp","tablet-paddingTop-xlarge":"_3HTGDpML","tablet-paddingTop-xxlarge":"_13Qaddpr","desktop-paddingTop-xsmall":"_16jrLfRP","desktop-paddingTop-small":"Idw94aP3","desktop-paddingTop-medium":"_1R8pIf5u","desktop-paddingTop-large":"_1KblKWWz","desktop-paddingTop-xlarge":"_1Argcyq5","desktop-paddingTop-xxlarge":"_3m1DpHzr","paddingRight-xsmall":"_2qsODlQ1","paddingRight-small":"J6fFv8Uw","paddingRight-medium":"_3B9cvkFr","paddingRight-large":"_31dJKVeK","paddingRight-xlarge":"MN3kdPGA","paddingRight-xxlarge":"hOdAx-DJ","tablet-paddingRight-xsmall":"_1zfH8gJo","tablet-paddingRight-small":"ntzZ3X_i","tablet-paddingRight-medium":"_2YK4VfjY","tablet-paddingRight-large":"l_EnRFEp","tablet-paddingRight-xlarge":"ZDEFhvKH","tablet-paddingRight-xxlarge":"_2xMDWQvF","desktop-paddingRight-xsmall":"_2SKtOj1H","desktop-paddingRight-small":"_1JFBzLmS","desktop-paddingRight-medium":"_1d8OeBwG","desktop-paddingRight-large":"_1oqWSRHW","desktop-paddingRight-xlarge":"_3hs_npgm","desktop-paddingRight-xxlarge":"_2rUd8spK","paddingBottom-xsmall":"QAjpz88e","paddingBottom-small":"_27gXF8UK","paddingBottom-medium":"_1burbc7g","paddingBottom-large":"_1AG-1RI8","paddingBottom-xlarge":"_4A7BKhnw","paddingBottom-xxlarge":"_1zYBan2X","tablet-paddingBottom-xsmall":"_1q-EYnWe","tablet-paddingBottom-small":"_3cdY7xQ6","tablet-paddingBottom-medium":"_8ttAhsAQ","tablet-paddingBottom-large":"_3o9VZU0a","tablet-paddingBottom-xlarge":"_31_a_F3n","tablet-paddingBottom-xxlarge":"_2blD9ia6","desktop-paddingBottom-xsmall":"_18jTpIXx","desktop-paddingBottom-small":"GGgw4UeY","desktop-paddingBottom-medium":"u8YQor1g","desktop-paddingBottom-large":"_1EO13Ldk","desktop-paddingBottom-xlarge":"e1feW_Dq","desktop-paddingBottom-xxlarge":"_2nZlnStA","paddingLeft-xsmall":"_2XOJ9rB5","paddingLeft-small":"_2CeIk2Gc","paddingLeft-medium":"_3pHpOf1P","paddingLeft-large":"_2zWUeqgY","paddingLeft-xlarge":"_3qO66J6_","paddingLeft-xxlarge":"_3SwRIaXO","tablet-paddingLeft-xsmall":"_1ksF6GVY","tablet-paddingLeft-small":"_1JYdaVH-","tablet-paddingLeft-medium":"_1Fi5Oqez","tablet-paddingLeft-large":"_1on5T6VJ","tablet-paddingLeft-xlarge":"_2aNsxVAR","tablet-paddingLeft-xxlarge":"_2ieKTraX","desktop-paddingLeft-xsmall":"_39FA-zw4","desktop-paddingLeft-small":"_2VuLKwfY","desktop-paddingLeft-medium":"_13U30dEX","desktop-paddingLeft-large":"NtbYWZBb","desktop-paddingLeft-xlarge":"_3hlXya32","desktop-paddingLeft-xxlarge":"vVYLlu05","bg-default":"acHew4QS","bg-aside":"_27wTWuhR","bg-highlight":"_13n6zG49","bg-selected":"_3xE7o7Lc","borderRadius-standard":"_1s36b_gH","borderRadius-full":"_1SIaqDBP","border-standard":"_1-QIwmSO"},module.exports=exports},2620:function(module,exports,__webpack_require__){var content=__webpack_require__(2621);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2621:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,":root {\n /*\n * breakpoints\n *\n * Unfortunately CSS custom properties are not available in media queries. So these are not\n * being used right now (although all uses of the hardcoded value are annotated with the names.\n *\n * We could manage these as pre-processor variables, but that would leave the question about how\n * is going to be possible to customize these values from consumer apps.\n *\n * See https://stackoverflow.com/q/40722882/621809\n * Possible solution: https://www.npmjs.com/package/postcss-media-variables\n */\n --reactist-breakpoint-tablet: 768px;\n --reactist-breakpoint-desktop: 992px;\n /* spacing sizes */\n --reactist-spacing-xsmall: 4px;\n --reactist-spacing-small: 8px;\n --reactist-spacing-medium: 12px;\n --reactist-spacing-large: 16px;\n --reactist-spacing-xlarge: 24px;\n --reactist-spacing-xxlarge: 32px;\n /* font sizes */\n --reactist-font-size-xsmall: 10px;\n --reactist-font-size-small: 12px;\n --reactist-font-size-normal: 14px;\n --reactist-font-size-large: 16px;\n --reactist-font-size-header: 20px;\n --reactist-font-size-header-large: 24px;\n --reactist-font-size-header-xlarge: 32px;\n /* font weight */\n --reactist-font-weight-regular: 400;\n --reactist-font-weight-medium: 500;\n --reactist-font-weight-strong: 700;\n /* border and separator colors */\n --reactist-framework-separator: #e6e6e6;\n --reactist-framework-border: #d6d6d6;\n --reactist-framework-border-focus: rgba(0, 0, 0, 0.4);\n --reactist-framework-border-alpha: rgba(0, 0, 0, 0.15);\n /* border-radius */\n --reactist-border-radius-small: 5px;\n --reactist-border-radius-large: 10px;\n /* background color */\n --reactist-bg-default: #ffffff;\n --reactist-bg-brand: #d1453b;\n --reactist-bg-aside: #fafafa;\n --reactist-bg-highlight: #f2f2f2;\n --reactist-bg-selected: #e6e6e6;\n /* colors */\n --reactist-framework-fill-accent: #e0edff;\n --reactist-framework-fill-aside: #fafafa;\n --reactist-framework-fill-background: #fafafa;\n --reactist-framework-fill-base: #ffffff;\n --reactist-framework-fill-crater: #f2f2f2;\n --reactist-framework-fill-crest: #e6e6e6;\n --reactist-framework-fill-elevated: #ffffff;\n --reactist-framework-fill-selected: #ececec;\n --reactist-framework-fill-highlight: #f2f2f2;\n --reactist-framework-fill-ledge: #e0e0e0;\n --reactist-framework-fill-peak: #3d3d3d;\n --reactist-framework-fill-pinnacle: #ebebeb;\n --reactist-framework-fill-ridge: #f2f2f2;\n --reactist-framework-fill-summit: #d6d6d6;\n --reactist-content-primary: rgba(0, 0, 0, 0.88);\n --reactist-content-secondary: rgba(0, 0, 0, 0.56);\n --reactist-content-tertiary: rgba(0, 0, 0, 0.4);\n --reactist-content-quaternary: rgba(0, 0, 0, 0.24);\n --reactist-content-light-on-dark: #ffffff;\n --reactist-chromatic-fill-red: #d1453b;\n --reactist-chromatic-fill-orange: #eb8d13;\n --reactist-chromatic-fill-green: #058527;\n --reactist-chromatic-fill-teal: #007e9e;\n --reactist-chromatic-fill-blue: #246fe0;\n --reactist-chromatic-fill-purple: #692fc2;\n --reactist-chromatic-fill-charcoal: #525252;\n --reactist-chromatic-fill-grey: #808080;\n --reactist-chromatic-fill-midnight: #4c5b70;\n --reactist-chromatic-content-red: #d1453b;\n --reactist-chromatic-content-orange: #eb8d13;\n --reactist-chromatic-content-green: #058527;\n --reactist-chromatic-content-green-background: rgba(5, 133, 39, 0.05);\n --reactist-chromatic-content-green-background-highlight: rgba(5, 133, 39, 0.1);\n --reactist-chromatic-content-teal: #007e9e;\n --reactist-chromatic-content-blue: #246fe0;\n --reactist-chromatic-content-purple: #692fc2;\n --reactist-chromatic-content-charcoal: #525252;\n --reactist-chromatic-content-grey: #808080;\n --reactist-chromatic-highlight-blue: #585d64;\n --reactist-chromatic-highlight-green: #d8ebdd;\n --reactist-chromatic-highlight-red: #fcf2f2;\n /* component-specific */\n --reactist-switch-checked: var(--reactist-chromatic-content-green);\n /* alerts */\n --reactist-alert-tone-info-icon: #1d438c;\n --reactist-alert-tone-info-border: var(--reactist-chromatic-content-blue);\n --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);\n --reactist-alert-tone-positive-icon: #035017;\n --reactist-alert-tone-positive-border: var(--reactist-chromatic-content-green);\n --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);\n --reactist-alert-tone-caution-icon: #5e3704;\n --reactist-alert-tone-caution-border: var(--reactist-chromatic-content-orange);\n --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);\n --reactist-alert-tone-critical-icon: #b03d32;\n --reactist-alert-tone-critical-border: var(--reactist-chromatic-content-red);\n --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);\n}\n","",{version:3,sources:["webpack://src/new-components/default-styles.less"],names:[],mappings:"AAAA;EACE;;;;;;;;;;;MAWI;EACF,mCAAA;EACA,oCAAA;EACF,kBAAkB;EAEhB,8BAAA;EACA,6BAAA;EACA,+BAAA;EACA,8BAAA;EACA,+BAAA;EACA,gCAAA;EAAF,eAAe;EAGb,iCAAA;EACA,gCAAA;EACA,iCAAA;EACA,gCAAA;EACA,iCAAA;EACA,uCAAA;EACA,wCAAA;EADF,gBAAgB;EAId,mCAAA;EACA,kCAAA;EACA,kCAAA;EAFF,gCAAgC;EAK9B,uCAAA;EACA,oCAAA;EACA,qDAAA;EACA,sDAAA;EAHF,kBAAkB;EAMhB,mCAAA;EACA,oCAAA;EAJF,qBAAqB;EAOnB,8BAAA;EACA,4BAAA;EACA,4BAAA;EACA,gCAAA;EACA,+BAAA;EALF,WAAW;EAQT,yCAAA;EACA,wCAAA;EACA,6CAAA;EACA,uCAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,2CAAA;EACA,4CAAA;EACA,wCAAA;EACA,uCAAA;EACA,2CAAA;EACA,wCAAA;EACA,yCAAA;EAEA,+CAAA;EACA,iDAAA;EACA,+CAAA;EACA,kDAAA;EACA,yCAAA;EAEA,sCAAA;EACA,yCAAA;EACA,wCAAA;EACA,uCAAA;EACA,uCAAA;EACA,yCAAA;EACA,2CAAA;EACA,uCAAA;EACA,2CAAA;EAEA,yCAAA;EACA,4CAAA;EACA,2CAAA;EACA,qEAAA;EACA,8EAAA;EACA,0CAAA;EACA,0CAAA;EACA,4CAAA;EACA,8CAAA;EACA,0CAAA;EAEA,4CAAA;EACA,6CAAA;EACA,2CAAA;EAVF,uBAAuB;EAarB,kEAAA;EAXF,WAAW;EAcT,wCAAA;EACA,yEAAA;EACA,8DAAA;EAEA,4CAAA;EACA,8EAAA;EACA,gEAAA;EAEA,2CAAA;EACA,8EAAA;EACA,iEAAA;EAEA,4CAAA;EACA,4EAAA;EACA,iEAAA;AAfJ",sourcesContent:[":root {\n /*\n * breakpoints\n *\n * Unfortunately CSS custom properties are not available in media queries. So these are not\n * being used right now (although all uses of the hardcoded value are annotated with the names.\n *\n * We could manage these as pre-processor variables, but that would leave the question about how\n * is going to be possible to customize these values from consumer apps.\n *\n * See https://stackoverflow.com/q/40722882/621809\n * Possible solution: https://www.npmjs.com/package/postcss-media-variables\n */\n --reactist-breakpoint-tablet: 768px;\n --reactist-breakpoint-desktop: 992px;\n\n /* spacing sizes */\n --reactist-spacing-xsmall: 4px;\n --reactist-spacing-small: 8px;\n --reactist-spacing-medium: 12px;\n --reactist-spacing-large: 16px;\n --reactist-spacing-xlarge: 24px;\n --reactist-spacing-xxlarge: 32px;\n\n /* font sizes */\n --reactist-font-size-xsmall: 10px;\n --reactist-font-size-small: 12px;\n --reactist-font-size-normal: 14px;\n --reactist-font-size-large: 16px;\n --reactist-font-size-header: 20px;\n --reactist-font-size-header-large: 24px;\n --reactist-font-size-header-xlarge: 32px;\n\n /* font weight */\n --reactist-font-weight-regular: 400;\n --reactist-font-weight-medium: 500;\n --reactist-font-weight-strong: 700;\n\n /* border and separator colors */\n --reactist-framework-separator: rgb(230, 230, 230);\n --reactist-framework-border: rgb(214, 214, 214);\n --reactist-framework-border-focus: rgba(0, 0, 0, 0.4);\n --reactist-framework-border-alpha: rgba(0, 0, 0, 0.15);\n\n /* border-radius */\n --reactist-border-radius-small: 5px;\n --reactist-border-radius-large: 10px;\n\n /* background color */\n --reactist-bg-default: rgb(255, 255, 255);\n --reactist-bg-brand: rgb(209, 69, 59);\n --reactist-bg-aside: rgb(250, 250, 250);\n --reactist-bg-highlight: rgb(242, 242, 242);\n --reactist-bg-selected: rgb(230, 230, 230);\n\n /* colors */\n --reactist-framework-fill-accent: rgb(224, 237, 255);\n --reactist-framework-fill-aside: rgb(250, 250, 250);\n --reactist-framework-fill-background: rgb(250, 250, 250);\n --reactist-framework-fill-base: rgb(255, 255, 255);\n --reactist-framework-fill-crater: rgb(242, 242, 242);\n --reactist-framework-fill-crest: rgb(230, 230, 230);\n --reactist-framework-fill-elevated: rgb(255, 255, 255);\n --reactist-framework-fill-selected: rgb(236, 236, 236);\n --reactist-framework-fill-highlight: rgb(242, 242, 242);\n --reactist-framework-fill-ledge: rgb(224, 224, 224);\n --reactist-framework-fill-peak: rgb(61, 61, 61);\n --reactist-framework-fill-pinnacle: rgb(235, 235, 235);\n --reactist-framework-fill-ridge: rgb(242, 242, 242);\n --reactist-framework-fill-summit: rgb(214, 214, 214);\n\n --reactist-content-primary: rgba(0, 0, 0, 0.88);\n --reactist-content-secondary: rgba(0, 0, 0, 0.56);\n --reactist-content-tertiary: rgba(0, 0, 0, 0.4);\n --reactist-content-quaternary: rgba(0, 0, 0, 0.24);\n --reactist-content-light-on-dark: rgb(255, 255, 255);\n\n --reactist-chromatic-fill-red: rgb(209, 69, 59);\n --reactist-chromatic-fill-orange: rgb(235, 141, 19);\n --reactist-chromatic-fill-green: rgb(5, 133, 39);\n --reactist-chromatic-fill-teal: rgb(0, 126, 158);\n --reactist-chromatic-fill-blue: rgb(36, 111, 224);\n --reactist-chromatic-fill-purple: rgb(105, 47, 194);\n --reactist-chromatic-fill-charcoal: rgb(82, 82, 82);\n --reactist-chromatic-fill-grey: rgb(128, 128, 128);\n --reactist-chromatic-fill-midnight: rgb(76, 91, 112);\n\n --reactist-chromatic-content-red: rgb(209, 69, 59);\n --reactist-chromatic-content-orange: rgb(235, 141, 19);\n --reactist-chromatic-content-green: rgb(5, 133, 39);\n --reactist-chromatic-content-green-background: rgba(5, 133, 39, 0.05);\n --reactist-chromatic-content-green-background-highlight: rgba(5, 133, 39, 0.1);\n --reactist-chromatic-content-teal: rgb(0, 126, 158);\n --reactist-chromatic-content-blue: rgb(36, 111, 224);\n --reactist-chromatic-content-purple: rgb(105, 47, 194);\n --reactist-chromatic-content-charcoal: rgb(82, 82, 82);\n --reactist-chromatic-content-grey: rgb(128, 128, 128);\n\n --reactist-chromatic-highlight-blue: rgb(88, 93, 100);\n --reactist-chromatic-highlight-green: rgb(216, 235, 221);\n --reactist-chromatic-highlight-red: rgb(252, 242, 242);\n\n /* component-specific */\n --reactist-switch-checked: var(--reactist-chromatic-content-green);\n\n /* alerts */\n --reactist-alert-tone-info-icon: #1d438c;\n --reactist-alert-tone-info-border: var(--reactist-chromatic-content-blue);\n --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);\n\n --reactist-alert-tone-positive-icon: #035017;\n --reactist-alert-tone-positive-border: var(--reactist-chromatic-content-green);\n --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);\n\n --reactist-alert-tone-caution-icon: #5e3704;\n --reactist-alert-tone-caution-border: var(--reactist-chromatic-content-orange);\n --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);\n\n --reactist-alert-tone-critical-icon: #b03d32;\n --reactist-alert-tone-critical-border: var(--reactist-chromatic-content-red);\n --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2622:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3b1oRRUM>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.mbc3LUo1>:not(:first-child){margin-top:var(--reactist-spacing-small)}.TErpU7nP>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._19PQeR--\x3e:not(:first-child){margin-top:var(--reactist-spacing-large)}._3BKTI-j7>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._1QQfSO-y>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.rQVejOPW>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.eCh5FkgK>:not(:first-child){margin-top:var(--reactist-spacing-small)}._29GNHdPc>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._1sChkByM>:not(:first-child){margin-top:var(--reactist-spacing-large)}._2KfFWNg1>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._3kgDZO8U>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._3SK4ZSq7>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.L2TBoAaZ>:not(:first-child){margin-top:var(--reactist-spacing-small)}.qG_1ntRy>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._2j6trIBI>:not(:first-child){margin-top:var(--reactist-spacing-large)}._12-ygMAC>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._1YzVvjNw>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_3b1oRRUM","space-small":"mbc3LUo1","space-medium":"TErpU7nP","space-large":"_19PQeR--","space-xlarge":"_3BKTI-j7","space-xxlarge":"_1QQfSO-y","tablet-space-xsmall":"rQVejOPW","tablet-space-small":"eCh5FkgK","tablet-space-medium":"_29GNHdPc","tablet-space-large":"_1sChkByM","tablet-space-xlarge":"_2KfFWNg1","tablet-space-xxlarge":"_3kgDZO8U","desktop-space-xsmall":"_3SK4ZSq7","desktop-space-small":"L2TBoAaZ","desktop-space-medium":"qG_1ntRy","desktop-space-large":"_2j6trIBI","desktop-space-xlarge":"_12-ygMAC","desktop-space-xxlarge":"_1YzVvjNw"},module.exports=exports},2623:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3Rf-23qb{border:none;border-bottom:1px solid var(--reactist-framework-separator)}._1Jue_n_H{border-color:var(--reactist-framework-border-focus)}",""]),exports.locals={divider:"_3Rf-23qb","weight-strong":"_1Jue_n_H"},module.exports=exports},2625:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,".eMdJaLwo{color:var(--reactist-content-primary);font-weight:var(--reactist-font-weight-strong)}._3iAwnzzO{font-weight:var(--reactist-font-weight-regular)}._3p8-J0VZ{color:var(--reactist-content-secondary)}._1Qasvyzb{color:var(--reactist-chromatic-content-red)}h1.eMdJaLwo{font-size:var(--reactist-font-size-header)}h1._1-yjZY8K{font-size:var(--reactist-font-size-header-xlarge)}h1._3M5sPjXF{font-size:var(--reactist-font-size-header-large)}h1._1_j4Pm2D,h2.eMdJaLwo{font-size:var(--reactist-font-size-large)}h2._1-yjZY8K{font-size:var(--reactist-font-size-header-large)}h2._3M5sPjXF{font-size:var(--reactist-font-size-header)}h2._1_j4Pm2D,h3.eMdJaLwo{font-size:var(--reactist-font-size-normal)}h3._1-yjZY8K{font-size:var(--reactist-font-size-header)}h3._3M5sPjXF{font-size:var(--reactist-font-size-large)}h3._1_j4Pm2D{font-size:var(--reactist-font-size-small)}h4.eMdJaLwo,h5.eMdJaLwo,h6.eMdJaLwo{font-size:var(--reactist-font-size-normal)}h4._1-yjZY8K,h5._1-yjZY8K,h6._1-yjZY8K{font-size:var(--reactist-font-size-header)}h4._3M5sPjXF,h5._3M5sPjXF,h6._3M5sPjXF{font-size:var(--reactist-font-size-large)}._1Uy0Yp-U{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._2yqCSry4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._1UgXSTeE{-webkit-line-clamp:2}._1njU6r08{-webkit-line-clamp:3}._2wNi7jvQ{-webkit-line-clamp:4}._2wo2NW21{-webkit-line-clamp:5}",""]),exports.locals={heading:"eMdJaLwo","weight-light":"_3iAwnzzO","tone-secondary":"_3p8-J0VZ","tone-danger":"_1Qasvyzb","size-largest":"_1-yjZY8K","size-larger":"_3M5sPjXF","size-smaller":"_1_j4Pm2D","line-clamp-1":"_1Uy0Yp-U",lineClamp:"_2yqCSry4","line-clamp-2":"_1UgXSTeE","line-clamp-3":"_1njU6r08","line-clamp-4":"_2wNi7jvQ","line-clamp-5":"_2wo2NW21"},module.exports=exports},2626:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"AlignmentStory",(function(){return AlignmentStory})),__webpack_require__.d(__webpack_exports__,"WidthsStory",(function(){return WidthsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"FlexChildStory",(function(){return FlexChildStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(5),_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_box__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(144),_columns__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(8);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i) {\n return (\n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},AlignmentStory.parameters),WidthsStory.parameters=_objectSpread({storySource:{source:'function WidthsStory({ space }: PartialProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},WidthsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory(args: PartialProps) {\n return (\n <>\n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n )\n}"}},ResponsiveStory.parameters),FlexChildStory.parameters=_objectSpread({storySource:{source:'function FlexChildStory(args: PartialProps) {\n return (\n \n \n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n )\n}'}},FlexChildStory.parameters);try{AlignmentStory.displayName="AlignmentStory",AlignmentStory.__docgenInfo={description:"",displayName:"AlignmentStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#AlignmentStory"]={docgenInfo:AlignmentStory.__docgenInfo,name:"AlignmentStory",path:"src/new-components/columns/columns.stories.tsx#AlignmentStory"})}catch(__react_docgen_typescript_loader_error){}try{WidthsStory.displayName="WidthsStory",WidthsStory.__docgenInfo={description:"",displayName:"WidthsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#WidthsStory"]={docgenInfo:WidthsStory.__docgenInfo,name:"WidthsStory",path:"src/new-components/columns/columns.stories.tsx#WidthsStory"})}catch(__react_docgen_typescript_loader_error){}try{ResponsiveStory.displayName="ResponsiveStory",ResponsiveStory.__docgenInfo={description:"",displayName:"ResponsiveStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#ResponsiveStory"]={docgenInfo:ResponsiveStory.__docgenInfo,name:"ResponsiveStory",path:"src/new-components/columns/columns.stories.tsx#ResponsiveStory"})}catch(__react_docgen_typescript_loader_error){}try{FlexChildStory.displayName="FlexChildStory",FlexChildStory.__docgenInfo={description:"",displayName:"FlexChildStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#FlexChildStory"]={docgenInfo:FlexChildStory.__docgenInfo,name:"FlexChildStory",path:"src/new-components/columns/columns.stories.tsx#FlexChildStory"})}catch(__react_docgen_typescript_loader_error){}},2629:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._2L5zGsYJ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._2L5zGsYJ>._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}.SPcToWBT{margin-left:calc(var(--reactist-spacing-small)*-1)}.SPcToWBT ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}._34KmL1aL{margin-left:calc(var(--reactist-spacing-medium)*-1)}._34KmL1aL ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._3-IO4Ua9{margin-left:calc(var(--reactist-spacing-large)*-1)}._3-IO4Ua9 ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}._3c3sKQuS{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._3c3sKQuS ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._1LF97wKT{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._1LF97wKT ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1geI5sQZ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._1geI5sQZ ._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}._2x39uRmC{margin-left:calc(var(--reactist-spacing-small)*-1)}._2x39uRmC ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}._1wj9bZXt{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1wj9bZXt ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._2xPtCUIx{margin-left:calc(var(--reactist-spacing-large)*-1)}._2xPtCUIx ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}.hV0FeHTP{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.hV0FeHTP ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._2tXjCbOw{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._2tXjCbOw ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._264WtIQZ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.hq9g6RX7 ._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}.hq9g6RX7{margin-left:calc(var(--reactist-spacing-small)*-1)}.hq9g6RX7 ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}.Qqka4eXS{margin-left:calc(var(--reactist-spacing-medium)*-1)}.Qqka4eXS ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._1dQPZ4Mc{margin-left:calc(var(--reactist-spacing-large)*-1)}._1dQPZ4Mc ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}._1DozdJT1{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._1DozdJT1 ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._2vjJqslP{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._2vjJqslP ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}}.bfhlTd94{width:100%}._1CFc-5RN{flex:0 0 50%}._3xfjmaWI{flex:0 0 33.33333%}._2VQkmkcm{flex:0 0 66.66667%}._1FULVP2z{flex:0 0 25%}._3cdnxheZ{flex:0 0 75%}._3jkZjr5Y{flex:0 0 20%}._25dhGRvr{flex:0 0 40%}._2lN2kQ8T{flex:0 0 60%}._365V5wtc{flex:0 0 80%}._2L5zGsYJ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._2L5zGsYJ>*{margin-top:var(--reactist-spacing-xsmall)}.SPcToWBT{margin-top:calc(var(--reactist-spacing-small)*-1)}.SPcToWBT>*{margin-top:var(--reactist-spacing-small)}._34KmL1aL{margin-top:calc(var(--reactist-spacing-medium)*-1)}._34KmL1aL>*{margin-top:var(--reactist-spacing-medium)}._3-IO4Ua9{margin-top:calc(var(--reactist-spacing-large)*-1)}._3-IO4Ua9>*{margin-top:var(--reactist-spacing-large)}._3c3sKQuS{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._3c3sKQuS>*{margin-top:var(--reactist-spacing-xlarge)}._1LF97wKT{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._1LF97wKT>*{margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1geI5sQZ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._3BzLxo2T>*{margin-top:var(--reactist-spacing-xsmall)}._2x39uRmC{margin-top:calc(var(--reactist-spacing-small)*-1)}._2x39uRmC>*{margin-top:var(--reactist-spacing-small)}._1wj9bZXt{margin-top:calc(var(--reactist-spacing-medium)*-1)}._1wj9bZXt>*{margin-top:var(--reactist-spacing-medium)}._2xPtCUIx{margin-top:calc(var(--reactist-spacing-large)*-1)}._2xPtCUIx>*{margin-top:var(--reactist-spacing-large)}.hV0FeHTP{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.hV0FeHTP>*{margin-top:var(--reactist-spacing-xlarge)}._2tXjCbOw{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._2tXjCbOw>*{margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._264WtIQZ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._264WtIQZ>*{margin-top:var(--reactist-spacing-xsmall)}.hq9g6RX7{margin-top:calc(var(--reactist-spacing-small)*-1)}.hq9g6RX7>*{margin-top:var(--reactist-spacing-small)}.Qqka4eXS{margin-top:calc(var(--reactist-spacing-medium)*-1)}.Qqka4eXS>*{margin-top:var(--reactist-spacing-medium)}._1dQPZ4Mc{margin-top:calc(var(--reactist-spacing-large)*-1)}._1dQPZ4Mc>*{margin-top:var(--reactist-spacing-large)}._1DozdJT1{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._1DozdJT1>*{margin-top:var(--reactist-spacing-xlarge)}._2vjJqslP{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._2vjJqslP>*{margin-top:var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_2L5zGsYJ",column:"_3QBzbLDq","space-small":"SPcToWBT","space-medium":"_34KmL1aL","space-large":"_3-IO4Ua9","space-xlarge":"_3c3sKQuS","space-xxlarge":"_1LF97wKT","tablet-space-xsmall":"_1geI5sQZ","tablet-space-small":"_2x39uRmC","tablet-space-medium":"_1wj9bZXt","tablet-space-large":"_2xPtCUIx","tablet-space-xlarge":"hV0FeHTP","tablet-space-xxlarge":"_2tXjCbOw","desktop-space-xsmall":"_264WtIQZ","desktop-space-small":"hq9g6RX7","desktop-space-medium":"Qqka4eXS","desktop-space-large":"_1dQPZ4Mc","desktop-space-xlarge":"_1DozdJT1","desktop-space-xxlarge":"_2vjJqslP","columnWidth-auto":"bfhlTd94","columnWidth-1-2":"_1CFc-5RN","columnWidth-1-3":"_3xfjmaWI","columnWidth-2-3":"_2VQkmkcm","columnWidth-1-4":"_1FULVP2z","columnWidth-3-4":"_3cdnxheZ","columnWidth-1-5":"_3jkZjr5Y","columnWidth-2-5":"_25dhGRvr","columnWidth-3-5":"_2lN2kQ8T","columnWidth-4-5":"_365V5wtc","tablet-tablet-space-xsmall":"_3BzLxo2T"},module.exports=exports},2630:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"HeadingStory",(function(){return HeadingStory})),__webpack_require__.d(__webpack_exports__,"TruncatedHeadingStory",(function(){return TruncatedHeadingStory})),__webpack_require__.d(__webpack_exports__,"HeadingPlaygroundStory",(function(){return HeadingPlaygroundStory}));__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_stack__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(41),_heading__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(30),_storybook_helper__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(5);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__webpack_exports__.default={title:"Design system/Heading",component:_heading__WEBPACK_IMPORTED_MODULE_12__.a,argTypes:{level:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["1","2","3","4","5","6"],"1"),size:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.i)(["largest","larger","smaller"]),weight:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["regular","light"],"regular"),lineClamp:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)([1,2,3,4,5],1),children:{control:{type:"text"},defaultValue:"Lorem ipsum dolor, sit amet consectetur adipisicing elit"},tone:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["normal","secondary","danger"],"normal")}};var HeadingStory=function HeadingStory(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{dividers:!0,space:"medium"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"largest"},"Heading level 1, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"larger"},"Heading level 1, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1},"Heading level 1"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"smaller"},"Heading level 1, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"largest"},"Heading level 2, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"larger"},"Heading level 2, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2},"Heading level 2"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"smaller"},"Heading level 2, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"largest"},"Heading level 3, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"larger"},"Heading level 3, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3},"Heading level 3"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"smaller"},"Heading level 3, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4,size:"largest"},"Heading level 4 / 5 / 6, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4,size:"larger"},"Heading level 4 / 5 / 6, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4},"Heading level 4 / 5 / 6"))))};HeadingStory.displayName="HeadingStory",HeadingStory.argTypes={level:{control:!1},size:{control:!1},weight:{control:!1},lineClamp:{control:!1},children:{control:!1},tone:{control:!1}};var TruncatedHeadingStory=function TruncatedHeadingStory(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"largest",lineClamp:1},"This is a long title which we will use demonstrate truncating content. When this overflows and begins to drop to a new line, its overflowing content will be replaced by ellipses."),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,lineClamp:2},"Now we have a subtitle which we will use to demostrate truncating to multiple lines. Sometimes we need to provide more context yet still remain skimmable to users, and subtitles are a good way to do this. As it’s much longer now we can allow a second line to be displayed before truncating it at two lines."))};TruncatedHeadingStory.displayName="TruncatedHeadingStory",TruncatedHeadingStory.argTypes={level:{control:!1},size:{control:!1},weight:{control:!1},lineClamp:{control:!1},children:{control:!1},tone:{control:!1}};var HeadingPlaygroundStory=function HeadingPlaygroundStory(_ref){var children=_ref.children,args=_objectWithoutProperties(_ref,["children"]);return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story playground"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,args,children))};HeadingPlaygroundStory.displayName="HeadingPlaygroundStory",HeadingStory.parameters=_objectSpread({storySource:{source:'function HeadingStory() {\n return (\n
\n \n \n \n Heading level 1, largest\n \n \n Heading level 1, larger\n \n Heading level 1\n \n Heading level 1, smaller\n \n \n\n \n \n Heading level 2, largest\n \n \n Heading level 2, larger\n \n Heading level 2\n \n Heading level 2, smaller\n \n \n\n \n \n Heading level 3, largest\n \n \n Heading level 3, larger\n \n Heading level 3\n \n Heading level 3, smaller\n \n \n\n \n \n Heading level 4 / 5 / 6, largest\n \n \n Heading level 4 / 5 / 6, larger\n \n Heading level 4 / 5 / 6\n \n \n
\n )\n}'}},HeadingStory.parameters),TruncatedHeadingStory.parameters=_objectSpread({storySource:{source:'function TruncatedHeadingStory() {\n return (\n
\n \n This is a long title which we will use demonstrate truncating content. When this\n overflows and begins to drop to a new line, its overflowing content will be replaced\n by ellipses.\n \n \n Now we have a subtitle which we will use to demostrate truncating to multiple lines.\n Sometimes we need to provide more context yet still remain skimmable to users, and\n subtitles are a good way to do this. As it’s much longer now we can allow a\n second line to be displayed before truncating it at two lines.\n \n
\n )\n}'}},TruncatedHeadingStory.parameters),HeadingPlaygroundStory.parameters=_objectSpread({storySource:{source:'function HeadingPlaygroundStory({\n children,\n ...args\n}: React.ComponentProps) {\n return (\n
\n {children}\n
\n )\n}'}},HeadingPlaygroundStory.parameters);try{HeadingPlaygroundStory.displayName="HeadingPlaygroundStory",HeadingPlaygroundStory.__docgenInfo={description:"",displayName:"HeadingPlaygroundStory",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"smaller" | "larger" | "largest" | undefined'}},level:{defaultValue:null,description:"",name:"level",required:!0,type:{name:"HeadingLevel"}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"regular" | "light" | undefined'}},tone:{defaultValue:null,description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/heading/heading.stories.tsx#HeadingPlaygroundStory"]={docgenInfo:HeadingPlaygroundStory.__docgenInfo,name:"HeadingPlaygroundStory",path:"src/new-components/heading/heading.stories.tsx#HeadingPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2631:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3PBgCLuk{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3PBgCLuk>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._1EQqWgsX{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._1EQqWgsX>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._12U1xEUI{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._12U1xEUI>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}._3Vq15WCN{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}._3Vq15WCN>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}._1qMcBSA4{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}._1qMcBSA4>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._2Ya091P2{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._2Ya091P2>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}@media (min-width:768px){._3BnTN3GQ{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3BnTN3GQ>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._2md5L24y{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._2md5L24y>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._3ysAA2oN{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._3ysAA2oN>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}._2KoqN92B{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}._2KoqN92B>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}._2nHdneYv{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}._2nHdneYv>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.BI8mwh9K{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.BI8mwh9K>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._3xos_1Ec{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3xos_1Ec>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._1ZYtlaQe{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._1ZYtlaQe>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}.YdLlurS5{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}.YdLlurS5>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.yxsHB9YW{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.yxsHB9YW>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.SFaqC2zl{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.SFaqC2zl>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._2IDfe2UJ{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._2IDfe2UJ>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_3PBgCLuk","space-small":"_1EQqWgsX","space-medium":"_12U1xEUI","space-large":"_3Vq15WCN","space-xlarge":"_1qMcBSA4","space-xxlarge":"_2Ya091P2","tablet-space-xsmall":"_3BnTN3GQ","tablet-space-small":"_2md5L24y","tablet-space-medium":"_3ysAA2oN","tablet-space-large":"_2KoqN92B","tablet-space-xlarge":"_2nHdneYv","tablet-space-xxlarge":"BI8mwh9K","desktop-space-xsmall":"_3xos_1Ec","desktop-space-small":"_1ZYtlaQe","desktop-space-medium":"YdLlurS5","desktop-space-large":"yxsHB9YW","desktop-space-xlarge":"SFaqC2zl","desktop-space-xxlarge":"_2IDfe2UJ"},module.exports=exports},2632:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"NestedStacksStory",(function(){return NestedStacksStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(78);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(5),_heading__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(30),_stack__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(41);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i & { itemCount: number }) {\n return (\n \n \n {times(itemCount).map((i) => (\n \n ))}\n \n \n )\n}"}},InteractivePropsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory({ itemCount }: { itemCount: number }) {\n return (\n <>\n \n \n \n {times(itemCount).map((i) => (\n \n ))}\n \n \n \n )\n}"}},ResponsiveStory.parameters),NestedStacksStory.parameters=_objectSpread({storySource:{source:'function NestedStacksStory(args: PartialProps) {\n return (\n <>\n \n \n Parent stack with space=“{args.space ?? \'none\'}”\n \n \n Nested stack with space=“xsmall”\n \n \n \n \n \n Nested stack with space=“xsmall”\n \n \n \n \n \n \n \n )\n}'}},NestedStacksStory.parameters);try{InteractivePropsStory.displayName="InteractivePropsStory",InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},dividers:{defaultValue:null,description:"",name:"dividers",required:!1,type:{name:'boolean | "strong" | "regular" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}},itemCount:{defaultValue:null,description:"",name:"itemCount",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#InteractivePropsStory"]={docgenInfo:InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/stack/stack.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}try{ResponsiveStory.displayName="ResponsiveStory",ResponsiveStory.__docgenInfo={description:"",displayName:"ResponsiveStory",props:{itemCount:{defaultValue:null,description:"",name:"itemCount",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#ResponsiveStory"]={docgenInfo:ResponsiveStory.__docgenInfo,name:"ResponsiveStory",path:"src/new-components/stack/stack.stories.tsx#ResponsiveStory"})}catch(__react_docgen_typescript_loader_error){}try{NestedStacksStory.displayName="NestedStacksStory",NestedStacksStory.__docgenInfo={description:"",displayName:"NestedStacksStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},dividers:{defaultValue:null,description:"",name:"dividers",required:!1,type:{name:'boolean | "strong" | "regular" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#NestedStacksStory"]={docgenInfo:NestedStacksStory.__docgenInfo,name:"NestedStacksStory",path:"src/new-components/stack/stack.stories.tsx#NestedStacksStory"})}catch(__react_docgen_typescript_loader_error){}},2633:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3Eg84Gxm{font-size:var(--reactist-font-size-normal);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._1EkrKy8T{font-size:var(--reactist-font-size-xsmall)}.JQ4tw9NM{font-size:var(--reactist-font-size-small)}.HOIrICee,._3WQusXMJ{font-size:var(--reactist-font-size-large)}.xOZMN2fQ{font-weight:var(--reactist-font-weight-medium)}._3Fr_et5R{font-weight:var(--reactist-font-weight-strong)}.zPORrfzj{color:var(--reactist-content-secondary)}._2lgSOyOF{color:var(--reactist-chromatic-content-red)}._16YsJq7Y{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.FfDzE8ee{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._1_gxWVG9{-webkit-line-clamp:2}._3QzI87wT{-webkit-line-clamp:3}._2tMJfik8{-webkit-line-clamp:4}._3LyjhixI{-webkit-line-clamp:5}",""]),exports.locals={text:"_3Eg84Gxm","size-xsmall":"_1EkrKy8T","size-small":"JQ4tw9NM","size-large":"HOIrICee","size-xlarge":"_3WQusXMJ","weight-medium":"xOZMN2fQ","weight-strong":"_3Fr_et5R","tone-secondary":"zPORrfzj","tone-danger":"_2lgSOyOF","line-clamp-1":"_16YsJq7Y",lineClamp:"FfDzE8ee","line-clamp-2":"_1_gxWVG9","line-clamp-3":"_3QzI87wT","line-clamp-4":"_2tMJfik8","line-clamp-5":"_3LyjhixI"},module.exports=exports},2634:function(module,exports,__webpack_require__){var map={"./components/Avatar.stories.tsx":2635,"./components/Button.stories.tsx":2904,"./components/Checkbox.stories.tsx":2893,"./components/ColorPicker.stories.tsx":2894,"./components/Dropdown.stories.tsx":2787,"./components/ErrorMessage.stories.tsx":2895,"./components/Icon.stories.tsx":2889,"./components/Input.stories.tsx":2896,"./components/KeyCapturer.stories.mdx":2797,"./components/KeyboardShortcut.stories.tsx":2798,"./components/Loading.stories.tsx":2897,"./components/Menu.stories.tsx":2898,"./components/Modal.stories.mdx":2890,"./components/Notification.stories.tsx":2905,"./components/ProgressBar.stories.tsx":2899,"./components/RangeInput.stories.tsx":2900,"./components/Select.stories.tsx":2901,"./components/Tabs.stories.tsx":2906,"./components/Time.stories.tsx":2891,"./components/Tip.stories.tsx":2877,"./components/Tooltip.stories.tsx":2880,"./components/color.stories.tsx":2883,"./reactist/Reactist.stories.mdx":2886};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=2634},2635:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InitialsAvatarStory",(function(){return InitialsAvatarStory})),__webpack_require__.d(__webpack_exports__,"CustomColorAvatarStory",(function(){return CustomColorAvatarStory})),__webpack_require__.d(__webpack_exports__,"PictureAvatarStory",(function(){return PictureAvatarStory})),__webpack_require__.d(__webpack_exports__,"AvatarPlaygroundStory",(function(){return AvatarPlaygroundStory}));__webpack_require__(152),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2636);var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(681),_src_components_avatar__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(251);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)'}},InitialsAvatarStory.parameters),CustomColorAvatarStory.parameters=_objectSpread({storySource:{source:"() => (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)"}},CustomColorAvatarStory.parameters),PictureAvatarStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)'}},PictureAvatarStory.parameters),AvatarPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n return (\n
\n \n
\n )\n}'}},AvatarPlaygroundStory.parameters);try{AvatarPlaygroundStory.displayName="AvatarPlaygroundStory",AvatarPlaygroundStory.__docgenInfo={description:"",displayName:"AvatarPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Avatar.stories.tsx#AvatarPlaygroundStory"]={docgenInfo:AvatarPlaygroundStory.__docgenInfo,name:"AvatarPlaygroundStory",path:"stories/components/Avatar.stories.tsx#AvatarPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2636:function(module,exports,__webpack_require__){var content=__webpack_require__(2637);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2637:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.avatars .reactist_avatar {\n display: inline-block;\n margin-right: 10px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/avatar_story.less"],names:[],mappings:"AAAA;EACI,qBAAA;EACA,kBAAA;AACJ",sourcesContent:[".story.avatars .reactist_avatar {\n display: inline-block;\n margin-right: 10px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2691:function(module,exports,__webpack_require__){var content=__webpack_require__(2692);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2692:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_avatar {\n flex-shrink: 0;\n background-position: center;\n color: white;\n text-align: center;\n border-radius: 50%;\n}\n.reactist_avatar_size--xxs {\n width: 16px;\n height: 16px;\n line-height: 16px;\n background-size: 16px;\n font-size: calc(16px / 2);\n}\n.reactist_avatar_size--xs {\n width: 20px;\n height: 20px;\n line-height: 20px;\n background-size: 20px;\n font-size: calc(20px / 2);\n}\n.reactist_avatar_size--s {\n width: 30px;\n height: 30px;\n line-height: 30px;\n background-size: 30px;\n font-size: calc(30px / 2);\n}\n.reactist_avatar_size--m {\n width: 32px;\n height: 32px;\n line-height: 32px;\n background-size: 32px;\n font-size: calc(32px / 2);\n}\n.reactist_avatar_size--l {\n width: 34px;\n height: 34px;\n line-height: 34px;\n background-size: 34px;\n font-size: calc(34px / 2);\n}\n.reactist_avatar_size--xl {\n width: 48px;\n height: 48px;\n line-height: 48px;\n background-size: 48px;\n font-size: calc(48px / 2);\n}\n.reactist_avatar_size--xxl {\n width: 70px;\n height: 70px;\n line-height: 70px;\n background-size: 70px;\n font-size: calc(70px / 2);\n}\n.reactist_avatar_size--xxxl {\n width: 100px;\n height: 100px;\n line-height: 100px;\n background-size: 100px;\n font-size: calc(100px / 2);\n}\n","",{version:3,sources:["webpack://src/components/avatar/avatar.less"],names:[],mappings:"AAQA;EACI,cAAA;EACA,2BAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AAPJ;AAUQ;EAfJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAQJ;AAMQ;EAlBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAeJ;AAEQ;EArBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAsBJ;AAFQ;EAxBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AA6BJ;AANQ;EA3BJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAoCJ;AAVQ;EA9BJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AA2CJ;AAdQ;EAjCJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAkDJ;AAlBQ;EApCJ,YAAA;EACA,aAAA;EACA,kBAAA;EACA,sBAAA;EACA,0BAAA;AAyDJ",sourcesContent:[".reactist_avatar_size(@size) {\n width: @size;\n height: @size;\n line-height: @size;\n background-size: @size;\n font-size: calc(@size / 2);\n}\n\n.reactist_avatar {\n flex-shrink: 0;\n background-position: center;\n color: white;\n text-align: center;\n border-radius: 50%;\n\n &_size {\n &--xxs {\n .reactist_avatar_size(16px);\n }\n &--xs {\n .reactist_avatar_size(20px);\n }\n &--s {\n .reactist_avatar_size(30px);\n }\n &--m {\n .reactist_avatar_size(32px);\n }\n &--l {\n .reactist_avatar_size(34px);\n }\n &--xl {\n .reactist_avatar_size(48px);\n }\n &--xxl {\n .reactist_avatar_size(70px);\n }\n &--xxxl {\n .reactist_avatar_size(100px);\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2771:function(module,exports,__webpack_require__){var content=__webpack_require__(2772);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2772:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story .reactist_button {\n display: inline;\n margin: 0 10px 0 0;\n}\n.story.playground .reactist_button,\np .reactist_button--link {\n margin: 0 !important;\n}\n.alternate_branding > .reactist_button {\n background-color: #dd4b39;\n}\n.alternate_branding > .reactist_button:not(.reactist_button--loading):not(.reactist_button--secondary):not([disabled]):hover {\n background-color: #c23321;\n}\n.alternate_branding > .reactist_button:not(.reactist_button--loading):not(.reactist_button--secondary):disabled {\n background-color: #e47365;\n}\n.alternate_branding > .reactist_button.reactist_button--secondary {\n background-color: white;\n border: 1px solid #dd4b39;\n color: #dd4b39;\n}\n","",{version:3,sources:["webpack://stories/components/styles/button_story.less"],names:[],mappings:"AAAA;EACI,eAAA;EACA,kBAAA;AACJ;AACA;;EAEI,oBAAA;AACJ;AAOI;EACI,yBAAA;AALR;AAOQ;EACI,yBAAA;AALZ;AAQQ;EACI,yBAAA;AANZ;AASQ;EACI,uBAAA;EACA,yBAAA;EACA,cAAA;AAPZ",sourcesContent:[".story .reactist_button {\n display: inline;\n margin: 0 10px 0 0;\n}\n.story.playground .reactist_button,\np .reactist_button--link {\n margin: 0 !important;\n}\n\n.alternate_branding {\n @primary-color: #dd4b39;\n @primary-color-lighter: lighten(#dd4b39, 10%);\n @primary-color-darker: darken(#dd4b39, 10%);\n // alternate button styles\n & > .reactist_button {\n background-color: @primary-color;\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary):not([disabled]):hover {\n background-color: @primary-color-darker;\n }\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary):disabled {\n background-color: @primary-color-lighter;\n }\n\n &.reactist_button--secondary {\n background-color: white;\n border: 1px solid @primary-color;\n color: @primary-color;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2773:function(module,exports,__webpack_require__){var content=__webpack_require__(2774);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2774:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2775),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_button {\n cursor: pointer;\n user-select: none;\n color: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n}\n.reactist_button[aria-disabled='true'] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.reactist_button--small {\n font-size: 0.81rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.6;\n}\n.reactist_button--primary,\n.reactist_button--secondary,\n.reactist_button--danger {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n box-sizing: border-box;\n padding: 5px 15px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n}\n.reactist_button--primary.reactist_button--small,\n.reactist_button--secondary.reactist_button--small,\n.reactist_button--danger.reactist_button--small {\n padding: 5px 10px;\n}\n.reactist_button--primary.reactist_button--large,\n.reactist_button--secondary.reactist_button--large,\n.reactist_button--danger.reactist_button--large {\n padding: 10px 15px;\n}\n.reactist_button--primary {\n background-color: #3f82ef;\n color: white !important;\n}\n.reactist_button--primary:not([disabled]):hover {\n background-color: #3b7be2;\n}\n.reactist_button--danger {\n background-color: #de4c4a;\n color: white !important;\n}\n.reactist_button--danger:not([disabled]):hover {\n background-color: #cf2826;\n}\n.reactist_button--secondary {\n background-color: white;\n color: #202020 !important;\n border-color: #dcdcdc;\n}\n.reactist_button--secondary:not([disabled]):hover {\n background-color: #f9f9f9;\n}\n.reactist_button--link {\n color: #3f82ef;\n text-decoration: none;\n}\n.reactist_button--link:disabled {\n color: #808080;\n}\n.reactist_button--link:not(:disabled):hover {\n text-decoration: underline;\n}\n.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large) {\n font-size: inherit;\n}\n.reactist_button--primary.reactist_button--loading,\n.reactist_button--secondary.reactist_button--loading,\n.reactist_button--danger.reactist_button--loading {\n cursor: progress !important;\n}\n.reactist_button--primary.reactist_button--loading:after,\n.reactist_button--secondary.reactist_button--loading:after,\n.reactist_button--danger.reactist_button--loading:after {\n background-repeat: no-repeat;\n background-size: 15px;\n content: '';\n display: inline-block;\n height: 15px;\n margin-left: 12px;\n vertical-align: middle;\n width: 15px;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: reactistRotateRight;\n animation-timing-function: linear;\n color: #ffffff;\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n}\n.reactist_button--secondary.reactist_button--loading {\n border-color: #dcdcdc;\n background-color: #dcdcdc;\n color: #808080;\n}\n@keyframes reactistRotateRight {\n from {\n transform: rotate(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotate(360deg);\n transform-origin: center center;\n }\n}\n","",{version:3,sources:["webpack://src/components/button/button.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,6BAAA;EACA,UAAA;AADJ;AAGI;EACI,YAAA;EACA,mBAAA;AADR;AAII;ECgCA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADjCJ;AAEI;;;ECoBA,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDnBI,sBAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AAGR;AAFQ;;;EACI,iBAAA;AAMZ;AAJQ;;;EACI,kBAAA;AAQZ;AAJI;EACI,yBAAA;EACA,uBAAA;AAMR;AAJQ;EACI,yBAAA;AAMZ;AAFI;EACI,yBAAA;EACA,uBAAA;AAIR;AAFQ;EACI,yBAAA;AAIZ;AAAI;EACI,uBAAA;EACA,yBAAA;EACA,qBAAA;AAER;AAAQ;EACI,yBAAA;AAEZ;AAEI;EACI,cAAA;EACA,qBAAA;AAAR;AAEQ;EACI,cAAA;AAAZ;AAGQ;EACI,0BAAA;AADZ;AAIQ;EACI,kBAAA;AAFZ;AAUQ;;;EACI,2BAAA;AANZ;AAOY;;;EACI,4BAAA;EACA,qBAAA;EACA,WAAA;EACA,qBAAA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,WAAA;EACA,sBAAA;EACA,mCAAA;EACA,mCAAA;EACA,iCAAA;EACA,cAAA;EACA,yDAAA;AAHhB;AAUI;EACI,qBAAA;EACA,yBAAA;EACA,cAAA;AARR;AAaA;EACI;IACI,uBAAA;IACA,+BAAA;EAXN;EAcE;IACI,yBAAA;IACA,+BAAA;EAZN;AACF",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_button {\n cursor: pointer;\n user-select: none;\n color: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n\n &[aria-disabled='true'] {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n &--small {\n .smaller_text();\n }\n\n &--primary,\n &--secondary,\n &--danger {\n .normal_text();\n box-sizing: border-box;\n padding: 5px 15px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n &.reactist_button--small {\n padding: 5px 10px;\n }\n &.reactist_button--large {\n padding: 10px 15px;\n }\n }\n\n &--primary {\n background-color: @primary_color;\n color: white !important;\n\n &:not([disabled]):hover {\n background-color: @primary_color_darker;\n }\n }\n\n &--danger {\n background-color: @color_red;\n color: white !important;\n\n &:not([disabled]):hover {\n background-color: darken(@color_red, 10%);\n }\n }\n\n &--secondary {\n background-color: white;\n color: @primary_font_color !important;\n border-color: @color_border_grey;\n\n &:not([disabled]):hover {\n background-color: @color_grey_9;\n }\n }\n\n &--link {\n color: @primary_color;\n text-decoration: none;\n\n &:disabled {\n color: @secondary_font_color;\n }\n\n &:not(:disabled):hover {\n text-decoration: underline;\n }\n\n &:not(&--small):not(&--large) {\n font-size: inherit;\n }\n }\n\n // loading-like buttons are only supported for the primary, secondary and danger variants\n &--primary,\n &--secondary,\n &--danger {\n &.reactist_button--loading {\n cursor: progress !important;\n &:after {\n background-repeat: no-repeat;\n background-size: 15px;\n content: '';\n display: inline-block;\n height: 15px;\n margin-left: 12px;\n vertical-align: middle;\n width: 15px;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: reactistRotateRight;\n animation-timing-function: linear;\n color: #ffffff;\n background-image: url('../icons/spinner.svg');\n }\n }\n }\n\n // we treat secondary buttons differently because the loading indicator is white\n // TODO: make the loading indicator color adaptable from the outside using SVG currentColor\n &--secondary.reactist_button--loading {\n border-color: @color_border_grey;\n background-color: @color_border_grey;\n color: @secondary_font_color;\n }\n}\n\n// Animation used by the busy state of a button\n@keyframes reactistRotateRight {\n from {\n transform: rotate(0deg);\n transform-origin: center center;\n }\n\n to {\n transform: rotate(360deg);\n transform-origin: center center;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2775:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/spinner.0a24d9f7.svg';"},2776:function(module,exports,__webpack_require__){var content=__webpack_require__(2777);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2777:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tooltip {\n font-size: 0.81rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.6;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n padding: 5px 10px;\n background-color: #333333;\n color: white;\n border: none;\n border-radius: 3px;\n z-index: 1000;\n}\n","",{version:3,sources:["webpack://src/components/tooltip/tooltip.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAIA;EC2CI,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED5CA,kBAAA;EACA,uBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,kBAAA;EACA,aAAA;AAAJ",sourcesContent:["@import '../styles/constants.less';\n\n@tooltip_background: @color_almost_black;\n\n.reactist_tooltip {\n .smaller_text();\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n padding: 5px 10px;\n background-color: @tooltip_background;\n color: white;\n border: none;\n border-radius: 3px;\n z-index: @z-index-tooltip;\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2778:function(module,exports,__webpack_require__){var content=__webpack_require__(2779);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2779:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_checkbox {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_checkbox:hover {\n cursor: pointer;\n}\n.reactist_checkbox .reactist_checkbox--input {\n margin-right: 10px;\n}\n","",{version:3,sources:["webpack://src/components/checkbox/checkbox.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrCJ;AADI;EACI,eAAA;AAGR;AANA;EAOQ,kBAAA;AAER",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_checkbox {\n .normal_text();\n &:hover {\n cursor: pointer;\n }\n\n .reactist_checkbox--input {\n margin-right: 10px;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2783:function(module,exports,__webpack_require__){var content=__webpack_require__(2784);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2784:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_color_picker .color_trigger {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n cursor: pointer;\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAgMSAuNzA3LjcwOEwxMi42MDQgMTRhMSAxIDAgMCAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwIDEgLjcwNy0uNzA4eiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 24px;\n}\n.reactist_color_picker .color_trigger--inner_ring {\n background-color: rgba(0, 0, 0, 0.1);\n width: 14px;\n height: 14px;\n border-radius: 50%;\n visibility: hidden;\n}\n.reactist_color_picker .color_trigger:hover .color_trigger--inner_ring {\n visibility: visible;\n}\n.reactist_color_picker .color_trigger.small {\n height: 18px;\n width: 18px;\n}\n.reactist_color_picker .color_trigger.small .color_trigger--inner_ring {\n width: 12px;\n height: 12px;\n}\n.reactist_color_picker .color_item {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 4px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n cursor: pointer;\n}\n.reactist_color_picker .color_item--inner_ring {\n background-color: transparent;\n border: 2px solid white;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n visibility: hidden;\n}\n.reactist_color_picker .color_item:hover .color_item--inner_ring {\n visibility: visible;\n}\n.reactist_color_picker .color_item.active {\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMSAxIC44NjMuNDk5bC00LjQ3IDcuNzQ0YS40OTkuNDk5IDAgMCAxLS43MzUuMTQ3LjUwMi41MDIgMCAwIDEtLjA2MS0uMDQ4bC0zLjM2Ni0zLjE0YS40OTkuNDk5IDAgMSAxIC42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_color_picker .color_options {\n padding: 6px;\n display: flex;\n flex-wrap: wrap;\n width: 164px;\n position: relative;\n}\n.reactist_color_picker .with_arrow:after,\n.reactist_color_picker .with_arrow:before {\n visibility: hidden;\n}\n","",{version:3,sources:["webpack://src/components/color-picker/color-picker.less"],names:[],mappings:"AAEA;EAEQ,cAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EAEA,yYAAA;EACA,2BAAA;EACA,4BAAA;EACA,qBAAA;AAHR;AAKQ;EACI,oCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AAHZ;AAKQ;EAEQ,mBAAA;AAJhB;AAQQ;EACI,YAAA;EACA,WAAA;AANZ;AAIQ;EAKQ,WAAA;EACA,YAAA;AANhB;AA7BA;EAyCQ,cAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;AATR;AAWQ;EACI,6BAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;AATZ;AAWQ;EAEQ,mBAAA;AAVhB;AAcQ;EACI,6bAAA;EACA,2BAAA;EACA,4BAAA;AAZZ;AAxDA;EAyEQ,YAAA;EACA,aAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;AAdR;AA/DA;;EAkFQ,kBAAA;AAfR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_color_picker {\n .color_trigger {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n cursor: pointer;\n\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAgMSAuNzA3LjcwOEwxMi42MDQgMTRhMSAxIDAgMCAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwIDEgLjcwNy0uNzA4eiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 24px;\n\n &--inner_ring {\n background-color: rgba(0, 0, 0, 0.1);\n width: 14px;\n height: 14px;\n border-radius: 50%;\n visibility: hidden;\n }\n &:hover {\n .color_trigger--inner_ring {\n visibility: visible;\n }\n }\n\n &.small {\n height: 18px;\n width: 18px;\n\n .color_trigger--inner_ring {\n width: 12px;\n height: 12px;\n }\n }\n }\n\n .color_item {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 4px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n cursor: pointer;\n\n &--inner_ring {\n background-color: transparent;\n border: 2px solid white;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n visibility: hidden;\n }\n &:hover {\n .color_item--inner_ring {\n visibility: visible;\n }\n }\n\n &.active {\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMSAxIC44NjMuNDk5bC00LjQ3IDcuNzQ0YS40OTkuNDk5IDAgMCAxLS43MzUuMTQ3LjUwMi41MDIgMCAwIDEtLjA2MS0uMDQ4bC0zLjM2Ni0zLjE0YS40OTkuNDk5IDAgMSAxIC42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n }\n }\n\n .color_options {\n padding: 6px;\n display: flex;\n flex-wrap: wrap;\n width: 164px; // 4 * 32 + 3 * 8 + 2 * 6\n position: relative;\n }\n\n .with_arrow:after,\n .with_arrow:before {\n visibility: hidden;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2785:function(module,exports,__webpack_require__){var content=__webpack_require__(2786);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2786:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_dropdown .trigger {\n cursor: pointer;\n display: block;\n}\n.reactist_dropdown .body {\n border-radius: 3px;\n border: 1px solid #dcdcdc;\n overflow: hidden;\n box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);\n z-index: 1;\n background-color: #fff;\n}\n.reactist_dropdown hr {\n border: none;\n height: 1px;\n background-color: #dcdcdc;\n margin: 0 5px;\n}\n.reactist_dropdown .with_arrow:after,\n.reactist_dropdown .with_arrow:before {\n z-index: 1;\n content: '';\n display: block;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px;\n right: 14px;\n}\n.reactist_dropdown .with_arrow:after {\n top: -11px;\n border-color: transparent transparent #fff transparent;\n}\n.reactist_dropdown .with_arrow:before {\n top: -12px;\n border-color: transparent transparent #dcdcdc transparent;\n}\n.reactist_dropdown .with_arrow.top:after {\n top: -1px;\n border-color: #fff transparent transparent transparent;\n}\n.reactist_dropdown .with_arrow.top:before {\n top: -1px;\n right: 13px;\n border-width: 7px;\n border-color: #dcdcdc transparent transparent transparent;\n}\n","",{version:3,sources:["webpack://src/components/dropdown/dropdown.less"],names:[],mappings:"AAEA;EAEQ,eAAA;EACA,cAAA;AAFR;AADA;EAOQ,kBAAA;EACA,yBAAA;EACA,gBAAA;EACA,2CAAA;EACA,UAAA;EACA,sBAAA;AAHR;AATA;EAgBQ,YAAA;EACA,WAAA;EACA,yBAAA;EACA,aAAA;AAJR;AAfA;;EAwBQ,UAAA;EACA,WAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,iBAAA;EACA,WAAA;AALR;AA3BA;EAoCQ,UAAA;EACA,sDAAA;AANR;AA/BA;EAyCQ,UAAA;EACA,yDAAA;AAPR;AAnCA;EA8CQ,SAAA;EACA,sDAAA;AARR;AAvCA;EAmDQ,SAAA;EACA,WAAA;EACA,iBAAA;EACA,yDAAA;AATR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_dropdown {\n .trigger {\n cursor: pointer;\n display: block;\n }\n\n .body {\n border-radius: 3px;\n border: 1px solid @color_border_grey;\n overflow: hidden;\n box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);\n z-index: 1;\n background-color: #fff;\n }\n\n hr {\n border: none;\n height: 1px;\n background-color: @color_border_grey;\n margin: 0 5px;\n }\n\n .with_arrow:after,\n .with_arrow:before {\n z-index: 1;\n content: '';\n display: block;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px;\n right: 14px;\n }\n\n .with_arrow:after {\n top: -11px;\n border-color: transparent transparent #fff transparent;\n }\n\n .with_arrow:before {\n top: -12px;\n border-color: transparent transparent @color_border_grey transparent;\n }\n\n .with_arrow.top:after {\n top: -1px;\n border-color: #fff transparent transparent transparent;\n }\n\n .with_arrow.top:before {\n top: -1px;\n right: 13px;\n border-width: 7px;\n border-color: @color_border_grey transparent transparent transparent;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2787:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"DropdownStory",(function(){return DropdownStory})),__webpack_require__.d(__webpack_exports__,"InteractiveDropdownStory",(function(){return InteractiveDropdownStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__),_src_components_dropdown__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(115),_src_components_button__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(16);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n \n \n \n \n
\n

Dropdown Content

\n
    \n
  • You can add anything
    • \n
  • you want to a dropdown
    • \n
  • (e.g. lists and headings)
    • \n
\n
\n \n \n
\n)'}},DropdownStory.parameters),InteractiveDropdownStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n \n \n \n \n \n
\n

Wow this is interactive

\n
    \n
  • Click outside
    • \n
  • to close this
    • \n
\n
\n \n \n
\n)'}},InteractiveDropdownStory.parameters)},2788:function(module,exports,__webpack_require__){var content=__webpack_require__(2789);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2789:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2790),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_error_message {\n padding: 10px 10px 0 10px;\n margin-bottom: 10px;\n background-color: #f8d9d8;\n border: 1px solid #de4c4a;\n}\n.reactist_error_message p {\n font-size: 0.875rem;\n color: #de4c4a;\n font-weight: 400;\n line-height: 1.7;\n margin: 0 0 10px 0;\n}\n.reactist_error_message .dismiss_icon {\n height: 20px;\n width: 20px;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n float: right;\n position: relative;\n top: -30px;\n}\n.reactist_error_message .dismiss_icon:hover {\n cursor: pointer;\n}\n","",{version:3,sources:["webpack://src/components/error-message/error-message.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EACI,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,yBAAA;AADJ;AAHA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDhCI,kBAAA;AAER;AAVA;EAYQ,YAAA;EACA,WAAA;EACA,4BAAA;EACA,2BAAA;EACA,yDAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;AACR;AAAQ;EACI,eAAA;AAEZ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_error_message {\n padding: 10px 10px 0 10px;\n margin-bottom: 10px;\n background-color: lighten(@color_red, 33%);\n border: 1px solid @color_red;\n\n p {\n .normal_text(@color: @color_red);\n margin: 0 0 10px 0;\n }\n\n .dismiss_icon {\n height: 20px;\n width: 20px;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url('../icons/close_red.svg');\n float: right;\n position: relative;\n top: -30px;\n &:hover {\n cursor: pointer;\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2790:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/close_red.d30aacaf.svg';"},2791:function(module,exports,__webpack_require__){var content=__webpack_require__(2792);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2792:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_icon {\n flex: 0 0 auto;\n display: block;\n width: 40px;\n height: 40px;\n background-size: 25px;\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_icon.disabled {\n opacity: 0.4;\n}\n.reactist_icon--component {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","",{version:3,sources:["webpack://src/components/icon/icon.less"],names:[],mappings:"AAAA;EACI,cAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,qBAAA;EACA,2BAAA;EACA,4BAAA;AACJ;AACI;EACI,YAAA;AACR;AAEI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;AAAR",sourcesContent:[".reactist_icon {\n flex: 0 0 auto;\n display: block;\n width: 40px;\n height: 40px;\n background-size: 25px;\n background-position: center;\n background-repeat: no-repeat;\n\n &.disabled {\n opacity: 0.4;\n }\n\n &--component {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2793:function(module,exports,__webpack_require__){var content=__webpack_require__(2794);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2794:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story-info {\n color: #565d6b;\n font-size: 14px;\n line-height: 1.5;\n margin-bottom: 50px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/input_story.less"],names:[],mappings:"AAAA;EACI,cAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;AACJ",sourcesContent:[".story-info {\n color: rgb(86, 93, 107);\n font-size: 14px;\n line-height: 1.5;\n margin-bottom: 50px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2795:function(module,exports,__webpack_require__){var content=__webpack_require__(2796);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2796:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_input {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n box-sizing: border-box;\n width: 100%;\n display: block;\n outline: none;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n padding: 5px 10px;\n margin: 0;\n}\n.reactist_input:focus {\n border-color: #3f82ef;\n}\n.reactist_input:disabled {\n background-color: #fafafa;\n}\n","",{version:3,sources:["webpack://src/components/input/input.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDtCA,sBAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,iBAAA;EACA,SAAA;AAEJ;AAAI;EACI,qBAAA;AAER;AAAI;EACI,yBAAA;AAER",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_input {\n .normal_text();\n box-sizing: border-box;\n width: 100%;\n display: block;\n outline: none;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n padding: 5px 10px;\n margin: 0;\n\n &:focus {\n border-color: @primary_color;\n }\n &:disabled {\n background-color: @color_grey_11;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2797:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(57);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.c,{title:"Components/KeyCapturer",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",{id:"component-documentation"},"Component Documentation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"documentation"},"Documentation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Use this component to wrap anything you want to handle key events for (e.g. an input)."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can specify the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"eventName")," to capture (defaults to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onKeyDown"),")."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Check the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"SUPPORTED_KEYS")," map to see which keys are supported and supply the respective ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"on\\${Key}")," prop (i.e. ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onEnter")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onArrowDown"),"). Note that the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onEnter")," handler will not fire when used in an IME composition session to prevent interference with the user's input."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"If you want the default behaviour to be preserved (i.e. only want to hook into the event instead of replacing it) set the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"propagate\\${Key}")," prop (e.g. ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"propagateBackspace"),")."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Example of an ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"strong"},""))," handling normal keystrokes by acting on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onChange")," as well as on enter and backspace presses with dedicated handlers. By propagating the backspace key users are still able to delete the last typed character while you can also implement additional logic on top."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"\n \n\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Components/KeyCapturer",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},2798:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"KeyboardShortcutPlaygroundStory",(function(){return KeyboardShortcutPlaygroundStory}));__webpack_require__(961),__webpack_require__(475),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(681),_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__=(__webpack_require__(2799),__webpack_require__(487));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}__webpack_exports__.default={title:"Components/KeyboardShortcut"};var KeyboardShortcutPlaygroundStory=function KeyboardShortcutPlaygroundStory(args){var shortcut=args.shortcut.length>1?args.shortcut:args.shortcut[0]||"";return react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("pre",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("code",null,"",react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("br",null),"  ","string"==typeof shortcut?shortcut:react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_11___default.a.Fragment,null,"{",JSON.stringify(shortcut),"}"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("br",null),"")),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("p",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("strong",null,"On macOS:"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__.a,{isMac:!0},shortcut)),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("p",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("strong",null,"Elsewhere:"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__.a,{isMac:!1},shortcut)))};KeyboardShortcutPlaygroundStory.displayName="KeyboardShortcutPlaygroundStory",KeyboardShortcutPlaygroundStory.args={shortcut:Object(_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_12__.a)("Shortcut","Cmd + Alt + Shift + E, q").split(/\s*,\s*/)},KeyboardShortcutPlaygroundStory.argTypes={shortcut:{control:{type:"text"}}},KeyboardShortcutPlaygroundStory.parameters=function _objectSpread(target){for(var i=1;i {\n const shortcut = args.shortcut.length > 1 ? args.shortcut : args.shortcut[0] || ''\n\n return (\n
\n 
\n                \n                    <KeyboardShortcut>\n                    
\n                      \n                    {typeof shortcut === 'string' ? (\n                        shortcut\n                    ) : (\n                        <>\n                            {'{'}\n                            {JSON.stringify(shortcut)}\n                            {'}'}\n                        \n                    )}\n                    
\n                    </KeyboardShortcut>\n                \n
\n

\n On macOS:\n {shortcut}\n

\n

\n Elsewhere:\n {shortcut}\n

\n
\n )\n}"}},KeyboardShortcutPlaygroundStory.parameters);try{KeyboardShortcutPlaygroundStory.displayName="KeyboardShortcutPlaygroundStory",KeyboardShortcutPlaygroundStory.__docgenInfo={description:"",displayName:"KeyboardShortcutPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/KeyboardShortcut.stories.tsx#KeyboardShortcutPlaygroundStory"]={docgenInfo:KeyboardShortcutPlaygroundStory.__docgenInfo,name:"KeyboardShortcutPlaygroundStory",path:"stories/components/KeyboardShortcut.stories.tsx#KeyboardShortcutPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2799:function(module,exports,__webpack_require__){var content=__webpack_require__(2800);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2800:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_keyboard_shortcut {\n font: 11px Menlo, monospace;\n}\n.reactist_keyboard_shortcut > kbd > kbd {\n display: inline-block;\n padding: 3px 5px;\n margin: 0 2px;\n line-height: normal;\n line-height: 10px;\n color: #202020;\n vertical-align: middle;\n background-color: #fafafa;\n border: 1px solid #dcdcdc;\n border-radius: 6px;\n box-shadow: inset 0 -1px 0 #dcdcdc;\n}\n","",{version:3,sources:["webpack://src/components/keyboard-shortcut/keyboard-shortcut.less"],names:[],mappings:"AAEA;EACI,2BAAA;AADJ;AAAA;EAGQ,qBAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,sBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kBAAA;EACA,kCAAA;AAAR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_keyboard_shortcut {\n font: 11px Menlo, monospace;\n > kbd > kbd {\n display: inline-block;\n padding: 3px 5px;\n margin: 0 2px;\n line-height: normal;\n line-height: 10px;\n color: @primary_font_color;\n vertical-align: middle;\n background-color: @color_grey_11;\n border: 1px solid @color_border_grey;\n border-radius: 6px;\n box-shadow: inset 0 -1px 0 @color_border_grey;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2804:function(module,exports,__webpack_require__){var content=__webpack_require__(2805);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2805:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.loading .spinner--white {\n background-color: #3f82ef;\n}\n","",{version:3,sources:["webpack://stories/components/styles/loading_story.less"],names:[],mappings:"AAAA;EAEQ,yBAAA;AAAR",sourcesContent:[".story.loading {\n .spinner--white {\n background-color: #3f82ef;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2806:function(module,exports,__webpack_require__){var content=__webpack_require__(2807);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2807:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.reactist_loading {\n display: flex;\n align-items: center;\n justify-items: center;\n align-content: center;\n justify-content: center;\n flex: 1 1 auto;\n}\n.reactist_loading .reactist_loading--spinner svg {\n animation-name: spinner;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n","",{version:3,sources:["webpack://src/components/styles/animations.less","webpack://src/components/loading/loading.less"],names:[],mappings:"AAAA;EACI;IACI,UAAA;ECCN;EDCE;IACI,UAAA;ECCN;AACF;ADEA;EACI;IACI,uBAAA;ECAN;EDEE;IACI,yBAAA;ECAN;AACF;AAbA;EACI,aAAA;EACA,mBAAA;EACA,qBAAA;EACA,qBAAA;EACA,uBAAA;EACA,cAAA;AAeJ;AArBA;EASQ,uBAAA;EACA,wBAAA;EACA,mCAAA;EACA,iCAAA;AAeR",sourcesContent:["@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n","@import '../styles/animations.less';\n\n.reactist_loading {\n display: flex;\n align-items: center;\n justify-items: center;\n align-content: center;\n justify-content: center;\n flex: 1 1 auto;\n\n .reactist_loading--spinner svg {\n animation-name: spinner;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2808:function(module,exports,__webpack_require__){var content=__webpack_require__(2809);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2809:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story {\n font-family: Arial;\n}\n.story button[aria-haspopup='menu'] svg {\n fill: currentcolor;\n width: 0.65em;\n height: 0.65em;\n margin-left: 0.5em;\n}\n.story ul {\n list-style: none;\n padding: 0;\n}\n.story .item_box {\n min-width: 300px;\n display: flex;\n border: 1px solid grey;\n padding: 4px 10px;\n margin: 4px 0;\n user-select: none;\n}\n.story .item_box:hover {\n background-color: #efefef;\n}\n.story .item_box.menu_open {\n background-color: #cfcfcf;\n}\n.story .item_box .item_name {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.story .menu_item_icon {\n padding-right: 10px;\n}\n.story .menu_item_label {\n flex: 1;\n}\n","",{version:3,sources:["webpack://stories/components/styles/menu_story.less"],names:[],mappings:"AAAA;EACI,kBAAA;AACJ;AAFA;EAIQ,kBAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;AACR;AARA;EAUQ,gBAAA;EACA,UAAA;AACR;AAZA;EAcQ,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,aAAA;EACA,iBAAA;AACR;AAAQ;EACI,yBAAA;AAEZ;AAAQ;EACI,yBAAA;AAEZ;AA1BA;EA2BY,OAAA;EACA,aAAA;EACA,mBAAA;AAEZ;AA/BA;EAkCQ,mBAAA;AAAR;AAlCA;EAsCQ,OAAA;AADR",sourcesContent:[".story {\n font-family: Arial;\n\n button[aria-haspopup='menu'] svg {\n fill: currentcolor;\n width: 0.65em;\n height: 0.65em;\n margin-left: 0.5em;\n }\n ul {\n list-style: none;\n padding: 0;\n }\n .item_box {\n min-width: 300px;\n display: flex;\n border: 1px solid grey;\n padding: 4px 10px;\n margin: 4px 0;\n user-select: none;\n &:hover {\n background-color: #efefef;\n }\n &.menu_open {\n background-color: #cfcfcf;\n }\n .item_name {\n flex: 1;\n display: flex;\n align-items: center;\n }\n }\n\n .menu_item_icon {\n padding-right: 10px;\n }\n\n .menu_item_label {\n flex: 1;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2845:function(module,exports,__webpack_require__){var content=__webpack_require__(2846);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2846:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_menulist[role='menu'] {\n display: block;\n white-space: nowrap;\n background: hsla(0, 0%, 100%, 0.99);\n outline: none;\n font-size: 0.81rem;\n padding: 4px 0;\n min-width: 180px;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n}\n.reactist_menulist[role='menu'] [role='menuitem'],\n.reactist_menulist[role='menu'] .reactist_menugroup__label {\n user-select: none;\n outline: none;\n text-align: left;\n display: flex;\n align-items: center;\n padding: 5px 10px;\n color: inherit;\n border: none;\n background-color: transparent;\n}\n.reactist_menulist[role='menu'] .reactist_menugroup__label {\n color: #808080;\n font-size: 0.75rem;\n}\n.reactist_menulist[role='menu'] .reactist_submenu_button {\n padding-right: 16px;\n}\n.reactist_menulist[role='menu'] .reactist_submenu_button::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent #808080;\n display: block;\n width: 0;\n right: 6px;\n}\n.reactist_menulist[role='menu'] [role='menuitem'] {\n width: 100%;\n box-sizing: border-box;\n}\n.reactist_menulist[role='menu'] [role='menuitem']:focus,\n.reactist_menulist[role='menu'] [role='menuitem'][aria-expanded='true'] {\n color: #202020;\n background-color: #ececec;\n}\n.reactist_menulist[role='menu'] [role='menuitem'][aria-disabled],\n.reactist_menulist[role='menu'] [role='menuitem']:disabled {\n color: #808080;\n pointer-events: none;\n}\n.reactist_menulist[role='menu'] a[role='menuitem'] {\n cursor: default;\n text-decoration: none;\n}\n.reactist_menulist[role='menu'] a[role='menuitem']:hover {\n text-decoration: none;\n}\n.reactist_menulist[role='menu'] [role='menu'] {\n margin-top: -5px;\n}\n.reactist_menulist[role='menu'] hr {\n border: none;\n height: 1px;\n background-color: #dcdcdc;\n margin: 4px 0;\n}\n","",{version:3,sources:["webpack://src/components/menu/menu.less"],names:[],mappings:"AAEA;EACI,cAAA;EACA,mBAAA;EACA,mCAAA;EACA,aAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;EACA,kBAAA;AADJ;AARA;;EAaQ,iBAAA;EACA,aAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,6BAAA;AADR;AApBA;EAyBQ,cAAA;EACA,kBAAA;AAFR;AAxBA;EA8BQ,mBAAA;AAHR;AA3BA;EAkCQ,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,2BAAA;EACA,iCAAA;EACA,cAAA;EACA,QAAA;EACA,UAAA;AAJR;AArCA;EA6CQ,WAAA;EACA,sBAAA;AALR;AAMQ;;EAEI,cAAA;EACA,yBAAA;AAJZ;AAMQ;;EAEI,cAAA;EACA,oBAAA;AAJZ;AAnDA;EA4DQ,eAAA;EACA,qBAAA;AANR;AAOQ;EACI,qBAAA;AALZ;AA1DA;EAqEQ,gBAAA;AARR;AA7DA;EAyEQ,YAAA;EACA,WAAA;EACA,yBAAA;EACA,aAAA;AATR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_menulist[role='menu'] {\n display: block;\n white-space: nowrap;\n background: hsla(0, 100%, 100%, 0.99);\n outline: none;\n font-size: @smaller_font_size;\n padding: 4px 0;\n min-width: 180px;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n\n [role='menuitem'],\n .reactist_menugroup__label {\n user-select: none;\n outline: none;\n text-align: left;\n display: flex;\n align-items: center;\n padding: 5px 10px;\n color: inherit;\n border: none;\n background-color: transparent;\n }\n\n .reactist_menugroup__label {\n color: @secondary_font_color;\n font-size: @tiny_font_size;\n }\n\n .reactist_submenu_button {\n padding-right: 16px;\n }\n\n .reactist_submenu_button::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent @secondary_font_color;\n display: block;\n width: 0;\n right: 6px;\n }\n\n [role='menuitem'] {\n width: 100%;\n box-sizing: border-box;\n &:focus,\n &[aria-expanded='true'] {\n color: @primary_font_color;\n background-color: @color_grey_10;\n }\n &[aria-disabled],\n &:disabled {\n color: @secondary_font_color;\n pointer-events: none;\n }\n }\n\n a[role='menuitem'] {\n cursor: default;\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n // sub-menus need to be shifted a bit towards the top to be aligned with its menu item\n [role='menu'] {\n margin-top: -5px;\n }\n\n hr {\n border: none;\n height: 1px;\n background-color: @color_border_grey;\n margin: 4px 0;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2847:function(module,exports,__webpack_require__){var content=__webpack_require__(2848);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2848:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"[id$='-modal--modal-playground-story'] .reactist_overlay {\n position: inherit;\n}\n","",{version:3,sources:["webpack://stories/components/styles/modal_story.less"],names:[],mappings:"AAKQ;EACI,iBAAA;AAJZ",sourcesContent:["// We don't want the modal playground to be fixed and in the centre for the docs tab\n// The selector targets just the suffix of the story's id in case we change our\n// stories' hierarchy in the future\n[id$='-modal--modal-playground-story'] {\n .reactist {\n &_overlay {\n position: inherit;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2849:function(module,exports,__webpack_require__){var content=__webpack_require__(2850);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},285:function(module,__webpack_exports__,__webpack_require__){"use strict";var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),CloseIcon=function CloseIcon(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path",{fill:"gray",fillRule:"evenodd",d:"M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"}))};CloseIcon.displayName="CloseIcon",__webpack_exports__.a=CloseIcon},2850:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.reactist_overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n background: rgba(0, 0, 0, 0.7);\n overflow: auto;\n animation: fadein 0.25s;\n}\n.reactist_overlay_inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n width: 100%;\n}\n.reactist_modal_box {\n display: flex;\n flex-direction: column;\n overflow: auto;\n overflow-x: hidden;\n width: 580px;\n border-radius: 3px;\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);\n}\n.reactist_modal_box.medium {\n width: 680px;\n}\n.reactist_modal_box.large {\n width: 60%;\n max-width: 1000px;\n}\n@media only screen and (max-width: 992px) {\n .reactist_modal_box.large {\n width: calc(100% - 80px);\n }\n}\n@media only screen and (max-width: 992px) {\n .reactist_modal_box {\n width: calc(100% - 80px);\n max-width: 580px;\n }\n}\n.reactist_modal_box__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n background-color: #f9f9f9;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom: 1px solid #fafafa;\n}\n.reactist_modal_box__header p {\n margin: 0 0 0 25px;\n padding: 10px 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n}\n.reactist_modal_box__header .title {\n font-size: 1rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.8;\n display: block;\n margin-top: 5px;\n}\n.reactist_modal_box__header .subtitle {\n font-size: 0.81rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.6;\n display: block;\n margin-top: 5px;\n}\n.reactist_modal_box__header a {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 46px;\n height: 46px;\n margin-left: auto;\n margin-right: 8px;\n}\n.reactist_modal_box__body {\n flex-grow: 1;\n overflow: auto;\n padding: 20px 25px 25px 25px;\n background-color: white;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_modal_box__body.plain {\n padding: 0;\n}\n.reactist_modal_box__body .dialog {\n overflow: auto;\n}\n.reactist_modal_box__body .dialog .reactist_icon {\n width: 42px;\n float: left;\n margin-right: 20px;\n}\n.reactist_modal_box__body .dialog .reactist_icon > * {\n max-height: 42px;\n max-width: 100%;\n}\n.reactist_modal_box__body .dialog .content {\n float: right;\n width: calc(100% - 62px);\n}\n.reactist_modal_box__body .dialog .content h1 {\n margin: 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n line-height: 1;\n}\n.reactist_modal_box__body:after {\n clear: both;\n content: '';\n display: block;\n}\n.reactist_modal_box__body .close {\n float: right;\n}\n.reactist_modal_box__actions {\n display: flex;\n flex-shrink: 0;\n justify-content: flex-end;\n padding: 20px 25px;\n background-color: white;\n border-top: 1px solid #ececec;\n}\n.reactist_modal_box__actions button {\n margin-left: 10px;\n}\n","",{version:3,sources:["webpack://src/components/styles/animations.less","webpack://src/components/modal/modal.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAAA;EACI;IACI,UAAA;ECCN;EDCE;IACI,UAAA;ECCN;AACF;ADEA;EACI;IACI,uBAAA;ECAN;EDEE;IACI,yBAAA;ECAN;AACF;AAXI;EACI,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,UAAA;EACA,aAAA;EACA,uBAAA;EACA,8BAAA;EACA,cAAA;EACA,uBAAA;AAaR;AAXQ;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;AAaZ;AATI;EACI,aAAA;EACA,sBAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,kBAAA;EACA,+CAAA;AAWR;AATQ;EACI,YAAA;AAWZ;AARQ;EACI,UAAA;EACA,iBAAA;AAUZ;AARY;EAAA;IACI,wBAAA;EAWd;AACF;AARQ;EAAA;IACI,wBAAA;IACA,gBAAA;EAWV;AACF;AARI;EACI,aAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;EACA,2BAAA;EACA,4BAAA;EACA,gCAAA;AAUR;AAjBI;EAUQ,kBAAA;EACA,eAAA;EC3BR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADsCJ;AAzBI;ECxBA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDsCQ,cAAA;EACA,eAAA;AAeZ;AAjCI;ECRA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED4BQ,cAAA;EACA,eAAA;AAiBZ;AAzCI;EA4BQ,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;AAgBZ;AAZI;EACI,YAAA;EACA,cAAA;EACA,4BAAA;EACA,uBAAA;EC1DJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADyEJ;AAfQ;EACI,UAAA;AAiBZ;AAzBI;EAYQ,cAAA;AAgBZ;AA5BI;EAeY,WAAA;EACA,WAAA;EACA,kBAAA;AAgBhB;AAdgB;EACI,gBAAA;EACA,eAAA;AAgBpB;AArCI;EA0BY,YAAA;EAEA,wBAAA;AAahB;AAzCI;EAgCgB,SAAA;ECtFhB,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDqFgB,cAAA;AAepB;AATQ;EACI,WAAA;EACA,WAAA;EACA,cAAA;AAWZ;AAtDI;EA+CQ,YAAA;AAUZ;AANI;EACI,aAAA;EACA,cAAA;EACA,yBAAA;EACA,kBAAA;EACA,uBAAA;EACA,6BAAA;AAQR;AAdI;EASQ,iBAAA;AAQZ",sourcesContent:["@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n","@import '../styles/constants.less';\n@import '../styles/animations.less';\n\n.reactist {\n &_overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n background: rgba(0, 0, 0, 0.7);\n overflow: auto;\n animation: fadein 0.25s;\n\n &_inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n width: 100%;\n }\n }\n\n &_modal_box {\n display: flex;\n flex-direction: column;\n overflow: auto;\n overflow-x: hidden;\n width: 580px;\n border-radius: 3px;\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);\n\n &.medium {\n width: 680px;\n }\n\n &.large {\n width: 60%;\n max-width: 1000px;\n\n @media @small_screen {\n width: calc(~'100% - 80px'); // 40px on each side (incl. top via padding)\n }\n }\n\n @media @small_screen {\n width: calc(~'100% - 80px'); // 40px on each side (incl. top via padding)\n max-width: 580px;\n }\n }\n\n &_modal_box__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n background-color: @color_grey_9;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom: 1px solid @color_grey_11;\n\n p {\n margin: 0 0 0 25px;\n padding: 10px 0;\n .normal_text(@weight: @bold);\n }\n\n .title {\n .heading_two_text();\n display: block;\n margin-top: 5px;\n }\n\n .subtitle {\n .smaller_text(@color: @secondary_font_color);\n display: block;\n margin-top: 5px;\n }\n\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 46px;\n height: 46px;\n margin-left: auto;\n margin-right: 8px;\n }\n }\n\n &_modal_box__body {\n flex-grow: 1;\n overflow: auto;\n padding: 20px 25px 25px 25px;\n background-color: white;\n .normal_text();\n\n &.plain {\n padding: 0;\n }\n\n .dialog {\n overflow: auto; // contain the floating elements correctly\n\n .reactist_icon {\n width: 42px;\n float: left;\n margin-right: 20px;\n\n & > * {\n max-height: 42px;\n max-width: 100%;\n }\n }\n\n .content {\n float: right;\n // modal size minus the (icon + margin)\n width: calc(~'100% - 62px');\n\n // when used as dialog this can be used as header inside the modal body\n h1 {\n margin: 0;\n .normal_text(@weight: @bold);\n line-height: 1;\n }\n }\n }\n\n // used to clear the floating icon while still enabling scrolling\n &:after {\n clear: both;\n content: '';\n display: block;\n }\n\n .close {\n float: right;\n }\n }\n\n &_modal_box__actions {\n display: flex;\n flex-shrink: 0;\n justify-content: flex-end;\n padding: 20px 25px;\n background-color: white;\n border-top: 1px solid @color_grey_10;\n\n button {\n margin-left: 10px;\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2851:function(module,exports,__webpack_require__){var content=__webpack_require__(2852);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2852:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".notification-story-notification-dot {\n box-sizing: border-box;\n display: flex;\n width: 22px;\n padding-top: 4px;\n}\n.notification-story-notification-dot:before {\n content: '';\n display: block;\n background-color: #70bc1c;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n}\n.notification-story-notification-container {\n width: 360px;\n max-width: none;\n}\n.notification-story-content {\n margin-left: 10px;\n}\n.notification-story-text {\n text-align: left;\n margin: 0 0 4px 0;\n color: #808080;\n}\n.notification-story-heading {\n text-align: left;\n display: flex;\n justify-content: space-between;\n margin: 0;\n color: #de4c4a;\n}\n.notification-story-avatar-container {\n margin-right: 12px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/notification_story.less"],names:[],mappings:"AAEA;EACI,sBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;AADJ;AAGI;EACI,WAAA;EACA,cAAA;EACA,yBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;AADR;AAKA;EACI,YAAA;EACA,eAAA;AAHJ;AAMA;EACI,iBAAA;AAJJ;AAOA;EACI,gBAAA;EACA,iBAAA;EACA,cAAA;AALJ;AAQA;EACI,gBAAA;EACA,aAAA;EACA,8BAAA;EACA,SAAA;EACA,cAAA;AANJ;AASA;EACI,kBAAA;AAPJ",sourcesContent:["@import '../../../src/components/styles/constants.less';\n\n.notification-story-notification-dot {\n box-sizing: border-box;\n display: flex;\n width: 22px;\n padding-top: 4px;\n\n &:before {\n content: '';\n display: block;\n background-color: @color_green;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n }\n}\n\n.notification-story-notification-container {\n width: 360px;\n max-width: none;\n}\n\n.notification-story-content {\n margin-left: 10px;\n}\n\n.notification-story-text {\n text-align: left;\n margin: 0 0 4px 0;\n color: @secondary_font_color;\n}\n\n.notification-story-heading {\n text-align: left;\n display: flex;\n justify-content: space-between;\n margin: 0;\n color: @color_red;\n}\n\n.notification-story-avatar-container {\n margin-right: 12px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2853:function(module,exports,__webpack_require__){var content=__webpack_require__(2854);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2854:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist-notification {\n display: flex;\n position: relative;\n font-size: 0.875rem;\n}\n.reactist-notification:not(.reactist-notification--with-button) {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid #dcdcdc;\n border-radius: 5px;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n background: #fff;\n}\n.reactist-notification__button,\n.reactist-notification__close-button {\n border: 0;\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: 300ms;\n background: #fff;\n}\n.reactist-notification__button:hover,\n.reactist-notification__close-button:hover {\n background: #ececec;\n}\n.reactist-notification__button {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid #dcdcdc;\n border-radius: 5px;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n background: #fff;\n display: flex;\n flex: 1;\n}\n.reactist-notification__button:hover + .reactist-notification__close-button {\n background: #ececec;\n}\n.reactist-notification__close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n border-radius: 5px;\n}\n.reactist-notification__close-button > * {\n display: block;\n}\n.reactist-notification__icon-content-group {\n display: flex;\n flex: 1;\n}\n.reactist-notification--with-close-button .reactist-notification__icon-content-group {\n padding-right: 24px;\n}\n.reactist-notification__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.reactist-notification__title {\n margin: 0 0 3px 0;\n font-size: 0.875rem;\n text-align: left;\n}\n.reactist-notification__subtitle {\n font-size: 0.81rem;\n margin: 0;\n}\n","",{version:3,sources:["webpack://src/components/notification/notification.less"],names:[],mappings:"AAaA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;AAZJ;AAcI;EAfA,sBAAA;EACA,8BAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,2CAAA;EACA,gBAAA;AAIJ;AASA;;EAEI,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,qCAAA;EACA,0BAAA;EACA,gBAAA;AAPJ;AASI;;EACI,mBAAA;AANR;AAUA;EAnCI,sBAAA;EACA,8BAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,2CAAA;EACA,gBAAA;EA8BA,aAAA;EACA,OAAA;AADJ;AAGI;EACI,mBAAA;AADR;AAKA;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,kBAAA;AAHJ;AADA;EAOQ,cAAA;AAHR;AAOA;EACI,aAAA;EACA,OAAA;AALJ;AAQA;EAEQ,mBAAA;AAPR;AAWA;EACI,aAAA;EACA,sBAAA;EACA,uBAAA;AATJ;AAYA;EACI,iBAAA;EACA,mBAAA;EACA,gBAAA;AAVJ;AAaA;EACI,kBAAA;EACA,SAAA;AAXJ",sourcesContent:["@import '../styles/constants.less';\n\n.container-style() {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid @color_border_grey;\n border-radius: @default-radius;\n box-shadow: @default-box-shadow;\n background: #fff;\n}\n\n.reactist-notification {\n display: flex;\n position: relative;\n font-size: @normal_font_size;\n\n &:not(.reactist-notification--with-button) {\n .container-style();\n }\n}\n\n.reactist-notification__button,\n.reactist-notification__close-button {\n border: 0;\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: @standard-timing;\n background: #fff;\n\n &:hover {\n background: @color_grey_10;\n }\n}\n\n.reactist-notification__button {\n .container-style();\n display: flex;\n flex: 1;\n\n &:hover + .reactist-notification__close-button {\n background: @color_grey_10;\n }\n}\n\n.reactist-notification__close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n border-radius: @default-radius;\n\n > * {\n display: block;\n }\n}\n\n.reactist-notification__icon-content-group {\n display: flex;\n flex: 1;\n}\n\n.reactist-notification--with-close-button {\n .reactist-notification__icon-content-group {\n padding-right: 24px;\n }\n}\n\n.reactist-notification__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.reactist-notification__title {\n margin: 0 0 3px 0;\n font-size: @normal_font_size;\n text-align: left;\n}\n\n.reactist-notification__subtitle {\n font-size: @smaller_font_size;\n margin: 0;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2855:function(module,exports,__webpack_require__){var content=__webpack_require__(2856);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2856:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tip {\n width: 250px;\n padding: 10px 20px;\n}\n.reactist_tip__container {\n width: 20px;\n height: 20px;\n}\n.reactist_tip--title {\n margin: 0 0 10px 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n}\n.reactist_tip--message {\n margin: 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n","",{version:3,sources:["webpack://src/components/tip/tip.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EAMI,YAAA;EACA,kBAAA;AANJ;AAAI;EACI,WAAA;EACA,YAAA;AAER;AAII;EACI,kBAAA;EC2BJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;AD5BJ;AACI;EACI,SAAA;ECuBJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrBJ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_tip {\n &__container {\n width: 20px;\n height: 20px;\n }\n\n width: 250px;\n padding: 10px 20px;\n\n &--title {\n margin: 0 0 10px 0;\n .normal_text(@weight: @bold);\n }\n &--message {\n margin: 0;\n .normal_text();\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2857:function(module,exports,__webpack_require__){var content=__webpack_require__(2858);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2858:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_progress_bar {\n margin: 10px 0;\n}\n","",{version:3,sources:["webpack://stories/components/styles/progressbar_story.less"],names:[],mappings:"AAAA;EACI,cAAA;AACJ",sourcesContent:[".reactist_progress_bar {\n margin: 10px 0;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2859:function(module,exports,__webpack_require__){var content=__webpack_require__(2860);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2860:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_progress_bar {\n height: 4px;\n border-radius: 3px;\n background-color: #ececec;\n width: 100%;\n}\n.reactist_progress_bar .inner {\n height: inherit;\n border-radius: 4px;\n background-color: #70bc1c;\n}\n","",{version:3,sources:["webpack://src/components/progress-bar/progress-bar.less"],names:[],mappings:"AAEA;EACI,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,WAAA;AADJ;AAHA;EAOQ,eAAA;EACA,kBAAA;EACA,yBAAA;AADR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_progress_bar {\n height: 4px;\n border-radius: 3px;\n background-color: @color_grey_10;\n width: 100%;\n\n .inner {\n height: inherit;\n border-radius: 4px;\n background-color: @color_green;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2861:function(module,exports,__webpack_require__){var content=__webpack_require__(2862);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2862:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2863),___CSS_LOADER_URL_IMPORT_1___=__webpack_require__(2864),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___),___CSS_LOADER_URL_REPLACEMENT_1___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_range_input .range_btn {\n height: 30px;\n width: 30px;\n background-size: 20px;\n display: inline-block;\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_range_input .range_btn.plus {\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n}\n.reactist_range_input .range_btn.minus {\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_1___+");\n}\n.reactist_range_input .range_btn:hover {\n cursor: pointer;\n}\n.reactist_range_input input[type='range'] {\n -webkit-appearance: none;\n width: 200px;\n height: 30px;\n}\n.reactist_range_input input[type='range']:focus {\n outline: none;\n}\n.reactist_range_input input[type='range']::-webkit-slider-runnable-track {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-webkit-slider-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n -webkit-appearance: none;\n margin-top: -9px;\n}\n.reactist_range_input input[type='range']:focus::-webkit-slider-runnable-track {\n background: #8d8d8d;\n}\n.reactist_range_input input[type='range']::-moz-range-track {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-moz-range-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n}\n.reactist_range_input input[type='range']::-ms-track {\n background: transparent;\n border-color: transparent;\n border-width: 20px 0;\n color: transparent;\n}\n.reactist_range_input input[type='range']::-ms-fill-lower {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #737373;\n}\n.reactist_range_input input[type='range']::-ms-fill-upper {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-ms-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n}\n.reactist_range_input input[type='range']:focus::-ms-fill-lower {\n background: #808080;\n}\n.reactist_range_input input[type='range']:focus::-ms-fill-upper {\n background: #8d8d8d;\n}\n","",{version:3,sources:["webpack://src/components/range-input/range-input.less"],names:[],mappings:"AAEA;EAKQ,YAAA;EACA,WAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,4BAAA;AALR;AAMQ;EACI,yDAAA;AAJZ;AAMQ;EACI,yDAAA;AAJZ;AAMQ;EACI,eAAA;AAJZ;AAdA;EAuDQ,wBAAA;EACA,YAAA;EACA,YAAA;AAtCR;AAwCQ;EACI,aAAA;AAtCZ;AAyCQ;EAzBA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAwBI,mBAAA;AApCZ;AAuCQ;EAvBA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EAmBI,wBAAA;EACA,gBAAA;AA/BZ;AAkCQ;EACI,mBAAA;AAhCZ;AAmCQ;EAxCA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAuCI,mBAAA;AA9BZ;AAgCQ;EArCA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AAQR;AA2BQ;EACI,uBAAA;EACA,yBAAA;EACA,oBAAA;EACA,kBAAA;AAzBZ;AA4BQ;EAvDA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAsDI,mBAAA;AAvBZ;AAyBQ;EA3DA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EA0DI,mBAAA;AApBZ;AAsBQ;EAxDA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AAqCR;AAgBQ;EACI,mBAAA;AAdZ;AAgBQ;EACI,mBAAA;AAdZ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_range_input {\n @range-height: 30px;\n @button-size: 20px;\n\n .range_btn {\n height: @range-height;\n width: @range-height;\n background-size: @button-size;\n display: inline-block;\n background-position: center;\n background-repeat: no-repeat;\n &.plus {\n background-image: url('../icons/plus.svg');\n }\n &.minus {\n background-image: url('../icons/minus.svg');\n }\n &:hover {\n cursor: pointer;\n }\n }\n\n // https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/\n @track-color: @secondary_font_color;\n @thumb-color: white;\n\n @thumb-radius: 50%;\n @thumb-height: @button-size;\n @thumb-width: @button-size;\n @thumb-border-width: 1px;\n @thumb-border-color: @primary_color;\n\n @track-width: 200px;\n @track-height: 2px;\n\n @contrast: 5%;\n\n .track() {\n width: @track-width;\n height: @track-height;\n cursor: pointer;\n animate: 0.2s;\n }\n\n .thumb() {\n box-sizing: border-box;\n border: @thumb-border-width solid @thumb-border-color;\n height: @thumb-height;\n width: @thumb-width;\n border-radius: @thumb-radius;\n background: @thumb-color;\n cursor: pointer;\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n width: @track-width;\n height: @range-height;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n .track();\n background: @track-color;\n }\n\n &::-webkit-slider-thumb {\n .thumb();\n -webkit-appearance: none;\n margin-top: (@track-height / 2) - (@thumb-height / 2);\n }\n\n &:focus::-webkit-slider-runnable-track {\n background: lighten(@track-color, @contrast);\n }\n\n &::-moz-range-track {\n .track();\n background: @track-color;\n }\n &::-moz-range-thumb {\n .thumb();\n }\n\n &::-ms-track {\n background: transparent;\n border-color: transparent;\n border-width: @thumb-width 0;\n color: transparent;\n }\n\n &::-ms-fill-lower {\n .track();\n background: darken(@track-color, @contrast);\n }\n &::-ms-fill-upper {\n .track();\n background: @track-color;\n }\n &::-ms-thumb {\n .thumb();\n }\n &:focus::-ms-fill-lower {\n background: @track-color;\n }\n &:focus::-ms-fill-upper {\n background: lighten(@track-color, @contrast);\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2863:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/plus.daa8a941.svg';"},2864:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/minus.c999e684.svg';"},2865:function(module,exports,__webpack_require__){var content=__webpack_require__(2866);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2866:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_select {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n background-color: white;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n padding: 5px 25px 5px 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDggMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjgiPgogICAgPHBhdGggZD0iTTEgM2wzLTMgMyAzTTEgN2wzIDMgMy0zIi8+CiAgPC9nPgo8L3N2Zz4K');\n background-position: calc(100% - 11px) center;\n background-repeat: no-repeat;\n background-size: 8px 11px;\n}\n.reactist_select.disabled {\n background-color: #fafafa;\n}\n.reactist_select:focus {\n outline: none;\n border: 1px solid #3f82ef;\n}\n","",{version:3,sources:["webpack://src/components/select/select.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDtCA,uBAAA;EACA,yBAAA;EACA,kBAAA;EAGA,qBAAA;EACA,wBAAA;EACA,gBAAA;EACA,SAAA;EACA,0BAAA;EACA,+XAAA;EACA,6CAAA;EACA,4BAAA;EACA,yBAAA;AAAJ;AAEI;EACI,yBAAA;AAAR;AAEI;EACI,aAAA;EACA,yBAAA;AAAR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_select {\n .normal_text();\n background-color: white;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n\n // nuke the browser styles\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n padding: 5px 25px 5px 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDggMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjgiPgogICAgPHBhdGggZD0iTTEgM2wzLTMgMyAzTTEgN2wzIDMgMy0zIi8+CiAgPC9nPgo8L3N2Zz4K');\n background-position: calc(~'100% - 11px') center;\n background-repeat: no-repeat;\n background-size: 8px 11px;\n\n &.disabled {\n background-color: @color_grey_11;\n }\n &:focus {\n outline: none;\n border: 1px solid @primary_color;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2867:function(module,exports,__webpack_require__){var content=__webpack_require__(2868);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2868:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tabs__tab {\n padding: 10px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tabs_story.less"],names:[],mappings:"AAAA;EACI,aAAA;AACJ",sourcesContent:[".reactist_tabs__tab {\n padding: 10px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2871:function(module,exports,__webpack_require__){var content=__webpack_require__(2872);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2872:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tabs__header {\n display: flex;\n border-bottom: 1px solid #dcdcdc;\n}\n.reactist_tabs__header--item {\n display: block;\n margin: 0 20px 0 0;\n padding: 10px 0;\n font-size: 0.875rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.7;\n text-decoration: none;\n box-sizing: border-box;\n}\n.reactist_tabs__header--item.active {\n font-size: 0.875rem;\n color: #3f82ef;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_tabs__header--item.active:after {\n display: block;\n content: '';\n background-color: #3f82ef;\n height: 3px;\n border-radius: 3px 3px 0 0;\n position: relative;\n top: 10px;\n}\n.reactist_tabs__header--item.disabled:hover {\n cursor: not-allowed;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header {\n display: flex;\n border-bottom: 0;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item {\n text-align: center;\n flex: 1;\n border-bottom: 1px solid #dcdcdc;\n margin: 0;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item.active {\n font-size: 0.875rem;\n color: #3f82ef;\n font-weight: 400;\n line-height: 1.7;\n border-bottom: 3px solid #3f82ef;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item:hover {\n text-decoration: none;\n}\n","",{version:3,sources:["webpack://src/components/tabs/tabs.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAGI;EACI,aAAA;EACA,gCAAA;AAFR;AAIQ;EAGI,cAAA;EACA,kBAAA;EACA,eAAA;EC2BR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED5BQ,qBAAA;EACA,sBAAA;AADZ;AAGY;ECsBR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADtBJ;AADgB;EACI,cAAA;EACA,WAAA;EACA,yBAAA;EACA,WAAA;EACA,0BAAA;EACA,kBAAA;EACA,SAAA;AAGpB;AAAY;EACI,mBAAA;AAEhB;AAGI;EAEQ,aAAA;EACA,gBAAA;AAFZ;AADI;EAOQ,kBAAA;EACA,OAAA;EACA,gCAAA;EACA,SAAA;AAHZ;AAKY;ECRR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDOY,gCAAA;AAAhB;AAGY;EACI,qBAAA;AADhB",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_tabs {\n &__header {\n display: flex;\n border-bottom: 1px solid @color_border_grey;\n\n &--item {\n @item_spacing: 10px;\n\n display: block;\n margin: 0 20px 0 0;\n padding: @item_spacing 0;\n .normal_text(@color: @secondary_font_color);\n text-decoration: none;\n box-sizing: border-box;\n\n &.active {\n .normal_text(@color: @primary_color);\n &:after {\n display: block;\n content: '';\n background-color: @primary_color;\n height: 3px;\n border-radius: 3px 3px 0 0;\n position: relative;\n top: @item_spacing;\n }\n }\n &.disabled:hover {\n cursor: not-allowed;\n }\n }\n }\n\n &--spreadlayout {\n .reactist_tabs__header {\n display: flex;\n border-bottom: 0;\n }\n\n .reactist_tabs__header--item {\n text-align: center;\n flex: 1;\n border-bottom: 1px solid @color_border_grey;\n margin: 0;\n\n &.active {\n .normal_text(@color: @primary_color);\n border-bottom: 3px solid @primary_color;\n }\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2873:function(module,exports,__webpack_require__){var content=__webpack_require__(2874);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2874:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.time div span {\n display: inline-block;\n width: 160px;\n text-align: right;\n font-weight: 600;\n margin-right: 16px;\n}\n.story.time div time {\n text-align: left;\n}\n","",{version:3,sources:["webpack://stories/components/styles/time_story.less"],names:[],mappings:"AAAA;EAEQ,qBAAA;EACA,YAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;AAAR;AANA;EASQ,gBAAA;AAAR",sourcesContent:[".story.time div {\n span {\n display: inline-block;\n width: 160px;\n text-align: right;\n font-weight: 600;\n margin-right: 16px;\n }\n time {\n text-align: left;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2875:function(module,exports,__webpack_require__){var content=__webpack_require__(2876);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2876:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_time {\n font-size: 0.75rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.8;\n}\n.reactist_tooltip .reactist_time:hover {\n text-decoration: underline;\n}\n","",{version:3,sources:["webpack://src/components/time/time.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqDI,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrDJ;AACA;EACI,0BAAA;AACJ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_time {\n .tiny_text();\n}\n\n.reactist_tooltip .reactist_time:hover {\n text-decoration: underline;\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2877:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TipStory",(function(){return TipStory})),__webpack_require__.d(__webpack_exports__,"TipPlaygroundStory",(function(){return TipPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2878);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_src_components_tip__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(384);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Tip

\n \n
\n)'}},TipStory.parameters),TipPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},TipPlaygroundStory.parameters);try{TipPlaygroundStory.displayName="TipPlaygroundStory",TipPlaygroundStory.__docgenInfo={description:"",displayName:"TipPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tip.stories.tsx#TipPlaygroundStory"]={docgenInfo:TipPlaygroundStory.__docgenInfo,name:"TipPlaygroundStory",path:"stories/components/Tip.stories.tsx#TipPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2878:function(module,exports,__webpack_require__){var content=__webpack_require__(2879);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2879:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.tip .reactist_tip__container {\n margin-left: 250px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tip_story.less"],names:[],mappings:"AAAA;EAEQ,kBAAA;AAAR",sourcesContent:[".story.tip {\n .reactist_tip__container {\n margin-left: 250px; // width of the tip\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2880:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TooltipPlaygroundStory",(function(){return TooltipPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2881);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__),_src_components_tooltip__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(2907),_src_components_button__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(16);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i {\n return (\n
\n \n \n \n \n
\n )\n}'}},TooltipPlaygroundStory.parameters);try{TooltipPlaygroundStory.displayName="TooltipPlaygroundStory",TooltipPlaygroundStory.__docgenInfo={description:"",displayName:"TooltipPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tooltip.stories.tsx#TooltipPlaygroundStory"]={docgenInfo:TooltipPlaygroundStory.__docgenInfo,name:"TooltipPlaygroundStory",path:"stories/components/Tooltip.stories.tsx#TooltipPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2881:function(module,exports,__webpack_require__){var content=__webpack_require__(2882);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2882:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.tooltip input,\n.story.tooltip button {\n display: block;\n text-align: center;\n}\n.story.tooltip input {\n margin: 0 auto;\n width: 400px;\n}\n.story.tooltip button {\n width: 250px;\n margin: 100px auto;\n padding: 100px 10px;\n border: 1px solid black;\n background-color: palegreen;\n}\n.story.tooltip button:hover,\n.story.tooltip button:focus {\n background-color: lightblue;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tooltip_story.less"],names:[],mappings:"AAAA;;EAGQ,cAAA;EACA,kBAAA;AAAR;AAJA;EAOQ,cAAA;EACA,YAAA;AAAR;AARA;EAWQ,YAAA;EACA,kBAAA;EACA,mBAAA;EACA,uBAAA;EACA,2BAAA;AAAR;AACQ;;EAEI,2BAAA;AACZ",sourcesContent:[".story.tooltip {\n input,\n button {\n display: block;\n text-align: center;\n }\n input {\n margin: 0 auto;\n width: 400px;\n }\n button {\n width: 250px;\n margin: 100px auto;\n padding: 100px 10px;\n border: 1px solid black;\n background-color: palegreen;\n &:hover,\n &:focus {\n background-color: lightblue;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2883:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Colors",(function(){return Colors}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(8),_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(30),_src_new_components_box__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(144);__webpack_require__(2884);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}__webpack_exports__.default={title:"Design tokens/Colors"};var frameworkFillColors=["--reactist-framework-fill-accent","--reactist-framework-fill-aside","--reactist-framework-fill-background","--reactist-framework-fill-base","--reactist-framework-fill-crater","--reactist-framework-fill-crest","--reactist-framework-fill-elevated","--reactist-framework-fill-selected","--reactist-framework-fill-highlight","--reactist-framework-fill-ledge","--reactist-framework-fill-peak","--reactist-framework-fill-pinnacle","--reactist-framework-fill-ridge","--reactist-framework-fill-summit"],frameworkSeparatorColors=["--reactist-framework-separator"],frameworkBorderColors=["--reactist-framework-border","--reactist-framework-border-focus","--reactist-framework-border-alpha"],contentColors=["--reactist-content-primary","--reactist-content-secondary","--reactist-content-tertiary","--reactist-content-quaternary","--reactist-content-light-on-dark"],chromaticFillColors=["--reactist-chromatic-fill-red","--reactist-chromatic-fill-orange","--reactist-chromatic-fill-green","--reactist-chromatic-fill-teal","--reactist-chromatic-fill-blue","--reactist-chromatic-fill-purple","--reactist-chromatic-fill-charcoal","--reactist-chromatic-fill-grey","--reactist-chromatic-fill-midnight"],chromaticContentColors=["--reactist-chromatic-content-red","--reactist-chromatic-content-orange","--reactist-chromatic-content-green","--reactist-chromatic-content-green-background","--reactist-chromatic-content-green-background-highlight","--reactist-chromatic-content-teal","--reactist-chromatic-content-blue","--reactist-chromatic-content-purple","--reactist-chromatic-content-charcoal","--reactist-chromatic-content-grey"],chromaticHighlightColors=["--reactist-chromatic-highlight-blue","--reactist-chromatic-highlight-green","--reactist-chromatic-highlight-red"];function Swatch(_ref){var color=_ref.color;return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.b,{key:color,alignY:"center",space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.a,{width:"content"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_box__WEBPACK_IMPORTED_MODULE_14__.a,{style:{background:"var(".concat(color,")")},className:"color_swatch"})),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.a,null,react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("code",{className:"color_swatch__css_variable"},color)))}Swatch.displayName="Swatch";var Colors=function Colors(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"xlarge",className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Framework"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Fill"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkFillColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Separator"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkSeparatorColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Border"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkBorderColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Content"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},contentColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Chromatic"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Fill"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticFillColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Content"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticContentColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Highlight"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticHighlightColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))))};Colors.displayName="Colors",Colors.parameters=function _objectSpread(target){for(var i=1;i\n \n Framework\n \n\n Framework-Fill\n \n {frameworkFillColors.map((color) => (\n \n ))}\n \n\n Framework-Separator\n \n {frameworkSeparatorColors.map((color) => (\n \n ))}\n \n\n Framework-Border\n \n {frameworkBorderColors.map((color) => (\n \n ))}\n \n\n \n Content\n \n \n {contentColors.map((color) => (\n \n ))}\n \n\n \n Chromatic\n \n\n Chromatic-Fill\n \n {chromaticFillColors.map((color) => (\n \n ))}\n \n\n Chromatic-Content\n \n {chromaticContentColors.map((color) => (\n \n ))}\n \n\n Chromatic-Highlight\n \n {chromaticHighlightColors.map((color) => (\n \n ))}\n \n \n )\n}'}},Colors.parameters)},2884:function(module,exports,__webpack_require__){var content=__webpack_require__(2885);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2885:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".color_swatch {\n width: 32px;\n height: 32px;\n border: 1px solid var(--reactist-framework-border);\n border-radius: var(--reactist-border-radius-small);\n}\n.color_swatch__css_variable {\n padding: 4px;\n border-radius: var(--reactist-border-radius-small);\n border: 1px solid var(--reactist-framework-border);\n background: var(--reactist-framework-fill-background);\n}\n","",{version:3,sources:["webpack://stories/components/styles/color-story.less"],names:[],mappings:"AAAA;EACI,WAAA;EACA,YAAA;EACA,kDAAA;EACA,kDAAA;AACJ;AAEA;EACI,YAAA;EACA,kDAAA;EACA,kDAAA;EACA,qDAAA;AAAJ",sourcesContent:[".color_swatch {\n width: 32px;\n height: 32px;\n border: 1px solid var(--reactist-framework-border);\n border-radius: var(--reactist-border-radius-small);\n}\n\n.color_swatch__css_variable {\n padding: 4px;\n border-radius: var(--reactist-border-radius-small);\n border: 1px solid var(--reactist-framework-border);\n background: var(--reactist-framework-fill-background);\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2886:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(57);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.c,{title:"Reactist",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"welcome"},"Welcome"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Open source React components made with ❤️ by Doist."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"how-to-use"},"How to use"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can add Reactist to your project by installing it from npm:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm install @doist/reactist"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","If you prefer to include static files grab the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://github.com/Doist/reactist/tree/develop/dist",target:"_blank",rel:"nofollow noopener noreferrer"},"minified build from the dist folder"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"A detailed explanation and examples on how to use each component can be accessed by clicking on the component name on the left."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"development"},"Development"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"First clone the repository to your local machine by running:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"git clone git@github.com:Doist/reactist.git"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","We identified two major modes of development for Reactist. First, running an interactive storybook and see the changes you make to a component in an isolated environment. This is especially helpful when developing new components. And second, improving existing components in real-life applications. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"storybook"},"Storybook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"For the first development mode run:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm run storybook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","This boots up a development server with hot reloading on http://localhost:6006. You can iterate on the components in the existing stories or add a completely new one. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"inside-your-application"},"Inside your application"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"For the second development mode you can leverage",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","First run:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm run start"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","this will update the build artifacts whenever you change something.\nIn your real application you need to first delete the current ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("em",{parentName:"p"},"@doist/reactist")," dependency and then link to your local one."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"cd ~/your-app\n# delete current reactist dependency\nrm -rf ./node_modules/@doist/reactist \n\n# link local reactist version\nnpm link ../reactist\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"The relative path to reactist may need to be changed to match your local environment. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"To undo the changes and switch back to the reactist version from npm do the following:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"cd ~/your-app\n# first remove linked reactist dependency\nrm -rf ./node_modules/@doist/reactist\n\n# re-install reactist from npm (-E avoids updating the version / package-lock.json) \nnpm install -E @doist/reactist\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"development-tips-and-tricks"},"Development tips and tricks"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Independent of the development you operate in to produce a new build (e.g. before submitting a PR) run: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run build\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"Note:")," This will ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"not")," update the docs. In case you want to update the docs you need to run:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run build-storybook\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can run our eslint checks with "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run check\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"It is mandatory to fix all linting errors before you make a pull request. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"Tip:")," You can fix most of the errors automatically by running: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run check -- --fix\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"testing"},"Testing"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Tests are executed with jest or by running: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run test\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"During development you may find it beneficial to continuously execute the tests. This works by running:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run test-watch\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This also prints the current test coverage."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"MacOS users might need to upgrade watchman with"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"brew install watchman\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"when experiencing troubles with the watch mode. See this issue for details: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://github.com/facebook/jest/issues/1767",target:"_blank",rel:"nofollow noopener noreferrer"},"https://github.com/facebook/jest/issues/1767")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Reactist",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},2889:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"IconStory",(function(){return Icon_stories_IconStory})),__webpack_require__.d(__webpack_exports__,"IconPlaygroundStory",(function(){return Icon_stories_IconPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),tooltip_tooltip=__webpack_require__(2907),prop_types=__webpack_require__(4),prop_types_default=__webpack_require__.n(prop_types),ThreeDotsIcon_svg_ThreeDotsIcon=function ThreeDotsIcon(_ref){var _ref$color=_ref.color,color=void 0===_ref$color?"#A5A5A5":_ref$color;return react_default.a.createElement("svg",{width:"26px",height:"26px",viewBox:"0 0 26 26"},react_default.a.createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},react_default.a.createElement("circle",{fill:color,cx:"19",cy:"13",r:"2"}),react_default.a.createElement("circle",{fill:color,cx:"13",cy:"13",r:"2"}),react_default.a.createElement("circle",{fill:color,cx:"7",cy:"13",r:"2"})))};ThreeDotsIcon_svg_ThreeDotsIcon.displayName="ThreeDotsIcon",ThreeDotsIcon_svg_ThreeDotsIcon.propTypes={color:prop_types_default.a.string};var ThreeDotsIcon_svg=ThreeDotsIcon_svg_ThreeDotsIcon;try{ThreeDotsIconsvg.displayName="ThreeDotsIconsvg",ThreeDotsIconsvg.__docgenInfo={description:"",displayName:"ThreeDotsIconsvg",props:{color:{defaultValue:{value:"#A5A5A5"},description:"",name:"color",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/icons/ThreeDotsIcon.svg.tsx#ThreeDotsIconsvg"]={docgenInfo:ThreeDotsIconsvg.__docgenInfo,name:"ThreeDotsIconsvg",path:"src/components/icons/ThreeDotsIcon.svg.tsx#ThreeDotsIconsvg"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(2791);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i void) | undefined"}},disabled:{defaultValue:{value:"false"},description:"Whether hte icon is disabled. Disabled icons can't be clicked and displayed with less opacity.",name:"disabled",required:!1,type:{name:"boolean | undefined"}},className:{defaultValue:null,description:"Additional css class that is applied to the icon",name:"className",required:!1,type:{name:"string | undefined"}},image:{defaultValue:null,description:"URL to the image that should be displayed as icon.",name:"image",required:!1,type:{name:"string | undefined"}},hoveredImage:{defaultValue:null,description:"Optional URL to the image that should be displayed when the icon is hovered.",name:"hoveredImage",required:!1,type:{name:"string | undefined"}},icon:{defaultValue:null,description:"Icon component to render, defaults to three dots.",name:"icon",required:!1,type:{name:"ReactNode"}},tooltip:{defaultValue:null,description:"Text of the tooltip of the icon.",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/icon/icon.tsx#Icon"]={docgenInfo:icon_Icon.__docgenInfo,name:"Icon",path:"src/components/icon/icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}var components_icon=icon_Icon,CloseIcon_svg=__webpack_require__(285);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n \n \n \n } />\n } disabled />\n \n \n \n
\n)'}},Icon_stories_IconStory.parameters),Icon_stories_IconPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Icon_stories_IconPlaygroundStory.parameters);try{Icon_stories_IconPlaygroundStory.displayName="IconPlaygroundStory",Icon_stories_IconPlaygroundStory.__docgenInfo={description:"",displayName:"IconPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Icon.stories.tsx#IconPlaygroundStory"]={docgenInfo:Icon_stories_IconPlaygroundStory.__docgenInfo,name:"IconPlaygroundStory",path:"stories/components/Icon.stories.tsx#IconPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2890:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Modal_stories_Template})),__webpack_require__.d(__webpack_exports__,"modalHeaderOnlyStory",(function(){return Modal_stories_modalHeaderOnlyStory})),__webpack_require__.d(__webpack_exports__,"modalHeaderAndBodyStory",(function(){return Modal_stories_modalHeaderAndBodyStory})),__webpack_require__.d(__webpack_exports__,"modalHeaderBodyAndActionsStory",(function(){return Modal_stories_modalHeaderBodyAndActionsStory})),__webpack_require__.d(__webpack_exports__,"modalScrollableBodyStory",(function(){return Modal_stories_modalScrollableBodyStory})),__webpack_require__.d(__webpack_exports__,"plainMediumModalStory",(function(){return Modal_stories_plainMediumModalStory})),__webpack_require__.d(__webpack_exports__,"modalPlaygroundStory",(function(){return modalPlaygroundStory}));__webpack_require__(1532),__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(2),blocks=__webpack_require__(57),react_dom=(__webpack_require__(473),__webpack_require__(152),__webpack_require__(24),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(51)),react_dom_default=__webpack_require__.n(react_dom),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),CloseIcon_svg=__webpack_require__(285);__webpack_require__(2849);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Header"]={docgenInfo:Modal.Header.__docgenInfo,name:"Modal.Header",path:"src/components/modal/modal.tsx#Modal.Header"})}catch(__react_docgen_typescript_loader_error){}try{Modal.Body.displayName="Modal.Body",Modal.Body.__docgenInfo={description:"",displayName:"Modal.Body",props:{icon:{defaultValue:null,description:"Display an icon (or basically any component) on the right hand side of the Modal.Body.",name:"icon",required:!1,type:{name:"ReactNode"}},plain:{defaultValue:null,description:"Applies less styles on the body (e.g. no padding)",name:"plain",required:!1,type:{name:"boolean | undefined"}},style:{defaultValue:null,description:"Sometimes a class name is not enough so you can use this to set the style directly.",name:"style",required:!1,type:{name:"CSSProperties | undefined"}},className:{defaultValue:null,description:"Additionall css class applied to the Modal.Body.",name:"className",required:!1,type:{name:"string | undefined"}},showCloseIcon:{defaultValue:{value:"false"},description:"Render a close icon in the top right corner of the Modal.Body.\nRecommended to use when no Modal.Header is used.",name:"showCloseIcon",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Body"]={docgenInfo:Modal.Body.__docgenInfo,name:"Modal.Body",path:"src/components/modal/modal.tsx#Modal.Body"})}catch(__react_docgen_typescript_loader_error){}try{Modal.Actions.displayName="Modal.Actions",Modal.Actions.__docgenInfo={description:"",displayName:"Modal.Actions",props:{children:{defaultValue:null,description:"Children to render inside the Modal.Actions. They can have an optional `close` property (boolean).\nWhen that is supplied and set to true it will close the modal after the onClick function",name:"children",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Actions"]={docgenInfo:Modal.Actions.__docgenInfo,name:"Modal.Actions",path:"src/components/modal/modal.tsx#Modal.Actions"})}catch(__react_docgen_typescript_loader_error){}var components_modal={Box:modal_Box,Header:modal_Header,Body:modal_Body,Actions:modal_Actions},components_button=(__webpack_require__(2847),__webpack_require__(16));function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Modal_stories_Template=function Template(_ref){_ref.data;var args=_objectWithoutProperties(_ref,["data"]);return Object(esm.b)(ModalStoryHelper_ModalPlaygroundStory,Modal_stories_extends({},args,{mdxType:"ModalPlaygroundStory"}))};Modal_stories_Template.displayName="Template";var layoutProps={Template:Modal_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",Modal_stories_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Components/Modal",component:components_modal,mdxType:"Meta"}),Object(esm.b)("h1",{id:"component-documentation"},"Component Documentation"),Object(esm.b)("h3",{id:"how-to-use"},"How to use"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal")," component consist of four subcomponents ",Object(esm.b)("em",{parentName:"p"},"Box, Header, Body, Actions")," which are exported as keys of the Modal object. Hence, to use a Modal your code should look like this:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},"import { Modal } from 'reactist';\n...\n<Modal.Box>\n <Modal.Header>...</Modal.Header>\n <Modal.Body>...</Modal.Body>\n <Modal.Actions>...</Modal.Actions>\n</Modal.Box>\n")),Object(esm.b)("p",null,"The Modal is always attached to an element with the id ",Object(esm.b)("strong",{parentName:"p"},"modal_box"),". You need to add this somewhere in your component hierarchy in order for the Modal to work correctly. It is sufficient to add this once near the top of your component hierarchy."),Object(esm.b)("h3",{id:"modal-box"},"Modal Box"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Box")," component simply acts as a container for the Modal and is responsible for rendering the dark overlay and all children components. You can pass it an optional ",Object(esm.b)("em",{parentName:"p"},"className")," property to apply additional styles."),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Box")," accepts an optional property ",Object(esm.b)("em",{parentName:"p"},"closeOnOverlayClick")," when set to ",Object(esm.b)("strong",{parentName:"p"},"true")," a click on the overlay will close the modal. Defaults to ",Object(esm.b)("strong",{parentName:"p"},"false"),"."),Object(esm.b)("h3",{id:"modal-header"},"Modal Header"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Header")," component shows the Header of the Modal. It always show a close icon on the right side to close the Modal. It can display arbitrary content you pass to it as children. However, the recommended usage pattern is to supply the ",Object(esm.b)("em",{parentName:"p"},"title")," and ",Object(esm.b)("em",{parentName:"p"},"subtitle")," (string) properties. This displays nicely formatted headings inside the Header."),Object(esm.b)("p",null,"Nevertheless, the ",Object(esm.b)("strong",{parentName:"p"},"Modal.Header")," will look the same whether you go for option 1 or option 2:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},"// Option 1\nA Fancy Title;\n\n// Option 2\n;\n")),Object(esm.b)("h3",{id:"modal-body"},"Modal Body"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"In the simplest case the ",Object(esm.b)("strong",{parentName:"p"},"Modal.Body")," just wraps all its children. However, it can be used to implement a more complex Dialog (i.e. if you do not want to render a Header). You can specify the ",Object(esm.b)("em",{parentName:"p"},"icon")," property (any node, e.g. an ",Object(esm.b)("em",{parentName:"p"},"<","img /",">")," or your custom ",Object(esm.b)("em",{parentName:"p"},"<","Icon /",">")," component) which will be displayed on the left side of the Dialog's Body. When you set the ",Object(esm.b)("em",{parentName:"p"},"showCloseIcon")," property to ",Object(esm.b)("strong",{parentName:"p"},"true")," the Body will display a close icon to dismiss the Dialog again. This should only be used when no Header is used."),Object(esm.b)("h3",{id:"modal-actions"},"Modal Actions"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Actions")," displays an action bar on the bottom of the Modal. It works best with the Reactist Buttons. If you set the ",Object(esm.b)("em",{parentName:"p"},"close")," property to ",Object(esm.b)("strong",{parentName:"p"},"true")," on any of the supplied children it's ",Object(esm.b)("em",{parentName:"p"},"onClick")," function will close the modal."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},'\n \n\n')),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderOnlyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderOnlyStory,{mdxType:"ModalHeaderOnlyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderAndBodyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderAndBodyStory,{mdxType:"ModalHeaderAndBodyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderBodyAndActionsStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderBodyAndActionsStory,{mdxType:"ModalHeaderBodyAndActionsStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalScrollableBodyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalScrollableBodyStory,{mdxType:"ModalScrollableBodyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"PlainMediumModalStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_PlainMediumModalStory,{mdxType:"PlainMediumModalStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalPlaygroundStory",args:{plain:!1,showCloseIcon:!1,medium:!1,large:!1,title:"Header of Modal",subtitle:"This is a smaller description"},mdxType:"Story"},Modal_stories_Template.bind({}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var Modal_stories_modalHeaderOnlyStory=function modalHeaderOnlyStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderOnlyStory,null)};Modal_stories_modalHeaderOnlyStory.displayName="modalHeaderOnlyStory",Modal_stories_modalHeaderOnlyStory.storyName="ModalHeaderOnlyStory",Modal_stories_modalHeaderOnlyStory.parameters={storySource:{source:""}};var Modal_stories_modalHeaderAndBodyStory=function modalHeaderAndBodyStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderAndBodyStory,null)};Modal_stories_modalHeaderAndBodyStory.displayName="modalHeaderAndBodyStory",Modal_stories_modalHeaderAndBodyStory.storyName="ModalHeaderAndBodyStory",Modal_stories_modalHeaderAndBodyStory.parameters={storySource:{source:""}};var Modal_stories_modalHeaderBodyAndActionsStory=function modalHeaderBodyAndActionsStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderBodyAndActionsStory,null)};Modal_stories_modalHeaderBodyAndActionsStory.displayName="modalHeaderBodyAndActionsStory",Modal_stories_modalHeaderBodyAndActionsStory.storyName="ModalHeaderBodyAndActionsStory",Modal_stories_modalHeaderBodyAndActionsStory.parameters={storySource:{source:""}};var Modal_stories_modalScrollableBodyStory=function modalScrollableBodyStory(){return Object(esm.b)(ModalStoryHelper_ModalScrollableBodyStory,null)};Modal_stories_modalScrollableBodyStory.displayName="modalScrollableBodyStory",Modal_stories_modalScrollableBodyStory.storyName="ModalScrollableBodyStory",Modal_stories_modalScrollableBodyStory.parameters={storySource:{source:""}};var Modal_stories_plainMediumModalStory=function plainMediumModalStory(){return Object(esm.b)(ModalStoryHelper_PlainMediumModalStory,null)};Modal_stories_plainMediumModalStory.displayName="plainMediumModalStory",Modal_stories_plainMediumModalStory.storyName="PlainMediumModalStory",Modal_stories_plainMediumModalStory.parameters={storySource:{source:""}};var modalPlaygroundStory=Modal_stories_Template.bind({});modalPlaygroundStory.storyName="ModalPlaygroundStory",modalPlaygroundStory.args={plain:!1,showCloseIcon:!1,medium:!1,large:!1,title:"Header of Modal",subtitle:"This is a smaller description"},modalPlaygroundStory.parameters={storySource:{source:"({\n data,\n ...args\n}) => "}};var componentMeta={title:"Components/Modal",component:components_modal,includeStories:["modalHeaderOnlyStory","modalHeaderAndBodyStory","modalHeaderBodyAndActionsStory","modalScrollableBodyStory","plainMediumModalStory","modalPlaygroundStory"]},mdxStoryNameToKey={ModalHeaderOnlyStory:"modalHeaderOnlyStory",ModalHeaderAndBodyStory:"modalHeaderAndBodyStory",ModalHeaderBodyAndActionsStory:"modalHeaderBodyAndActionsStory",ModalScrollableBodyStory:"modalScrollableBodyStory",PlainMediumModalStory:"plainMediumModalStory",ModalPlaygroundStory:"modalPlaygroundStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(blocks.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},2891:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"NoHoverEffectStory",(function(){return Time_stories_NoHoverEffectStory})),__webpack_require__.d(__webpack_exports__,"ExpandTimeStory",(function(){return Time_stories_ExpandTimeStory})),__webpack_require__.d(__webpack_exports__,"FullyExpandTimeStory",(function(){return Time_stories_FullyExpandTimeStory})),__webpack_require__.d(__webpack_exports__,"TooltipTimeStory",(function(){return Time_stories_TooltipTimeStory})),__webpack_require__.d(__webpack_exports__,"TranslatedTimeStory",(function(){return Time_stories_TranslatedTimeStory})),__webpack_require__.d(__webpack_exports__,"TimePlaygroundStory",(function(){return Time_stories_TimePlaygroundStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2873);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),dayjs_min=__webpack_require__(126),dayjs_min_default=__webpack_require__.n(dayjs_min),tooltip=(__webpack_require__(656),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(2907)),localizedFormat=(__webpack_require__(473),__webpack_require__(1568)),localizedFormat_default=__webpack_require__.n(localizedFormat);dayjs_min_default.a.extend(localizedFormat_default.a);var TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo:function timeAgo(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale=config.locale,locale=void 0===_config$locale?"en":_config$locale,_config$shortFormatCu=config.shortFormatCurrentYear,shortFormatCurrentYear=void 0===_config$shortFormatCu?this.SHORT_FORMAT_CURRENT_YEAR:_config$shortFormatCu,_config$shortFormatPa=config.shortFormatPastYear,shortFormatPastYear=void 0===_config$shortFormatPa?this.SHORT_FORMAT_PAST_YEAR:_config$shortFormatPa,_config$daysSuffix=config.daysSuffix,daysSuffix=void 0===_config$daysSuffix?"d":_config$daysSuffix,_config$hoursSuffix=config.hoursSuffix,hoursSuffix=void 0===_config$hoursSuffix?"h":_config$hoursSuffix,_config$minutesSuffix=config.minutesSuffix,minutesSuffix=void 0===_config$minutesSuffix?"m":_config$minutesSuffix,_config$momentsAgo=config.momentsAgo,momentsAgo=void 0===_config$momentsAgo?"moments ago":_config$momentsAgo,now=dayjs_min_default()(),date=dayjs_min_default()(1e3*timestamp);date.locale(locale);var diffMinutes=now.diff(date,"minute"),diffHours=now.diff(date,"hour"),diffDays=now.diff(date,"day");return diffDays>1?date.isSame(now,"year")?date.format(shortFormatCurrentYear):date.format(shortFormatPastYear):1===diffDays?"".concat(diffDays).concat(daysSuffix):diffHours>0&&diffHours<=23?"".concat(diffHours).concat(hoursSuffix):diffMinutes>0&&diffMinutes<=59?"".concat(diffMinutes).concat(minutesSuffix):momentsAgo},formatTime:function formatTime(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale2=config.locale,locale=void 0===_config$locale2?"en":_config$locale2,_config$shortFormatCu2=config.shortFormatCurrentYear,shortFormatCurrentYear=void 0===_config$shortFormatCu2?this.SHORT_FORMAT_CURRENT_YEAR:_config$shortFormatCu2,_config$shortFormatPa2=config.shortFormatPastYear,shortFormatPastYear=void 0===_config$shortFormatPa2?this.SHORT_FORMAT_PAST_YEAR:_config$shortFormatPa2,date=dayjs_min_default()(1e3*timestamp);return date.locale(locale),date.isSame(dayjs_min_default()(),"year")?date.format(shortFormatCurrentYear):date.format(shortFormatPastYear)},formatTimeLong:function formatTimeLong(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale3=config.locale,locale=void 0===_config$locale3?"en":_config$locale3,_config$longFormat=config.longFormat,longFormat=void 0===_config$longFormat?this.LONG_FORMAT:_config$longFormat,date=dayjs_min_default()(1e3*timestamp);return date.locale(locale),date.format(longFormat)}};__webpack_require__(2875);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i (\n
\n

Normal Time (no hover effect)

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_NoHoverEffectStory.parameters),Time_stories_ExpandTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Expanding time on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_ExpandTimeStory.parameters),Time_stories_FullyExpandTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Fully expanding time on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_FullyExpandTimeStory.parameters),Time_stories_TooltipTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Show full time in tooltip on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_TooltipTimeStory.parameters),Time_stories_TranslatedTimeStory.parameters=_objectSpread({storySource:{source:"() => {\n const i18nConfig = {\n locale: 'de',\n hoursSuffix: 'Std',\n minutesSuffix: 'min',\n momentsAgo: 'Gerade eben',\n }\n\n return (\n
\n

Translated times

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n )\n}"}},Time_stories_TranslatedTimeStory.parameters),Time_stories_TimePlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n
\n)'}},Time_stories_TimePlaygroundStory.parameters);try{Time_stories_TimePlaygroundStory.displayName="TimePlaygroundStory",Time_stories_TimePlaygroundStory.__docgenInfo={description:"",displayName:"TimePlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Time.stories.tsx#TimePlaygroundStory"]={docgenInfo:Time_stories_TimePlaygroundStory.__docgenInfo,name:"TimePlaygroundStory",path:"stories/components/Time.stories.tsx#TimePlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2892:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"decorators",(function(){return decorators})),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(24);var client_api=__webpack_require__(2930),esm=__webpack_require__(9),decorators=(__webpack_require__(0),__webpack_require__(2601),[function(Story){return Story()}]),parameters={options:{storySort:{method:"alphabetical",order:["Reactist","Design tokens","Design system","Components"]}},decorators:decorators};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(client_api.b)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(client_api.c)(loader,!1)}));case"parameters":return Object(client_api.d)(function _objectSpread(target){for(var i=1;i void) | undefined"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string | number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/checkbox/checkbox.tsx#Checkbox"]={docgenInfo:Checkbox.__docgenInfo,name:"Checkbox",path:"src/components/checkbox/checkbox.tsx#Checkbox"})}catch(__react_docgen_typescript_loader_error){}var components_checkbox=Checkbox;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [checked, setChecked] = useState(false)\n\n const handleCheck = () => {\n setChecked((prev: boolean) => !prev)\n }\n\n return (\n
\n

Checkbox

\n \n
\n )\n}'}},Checkbox_stories_CheckboxStory.parameters),Checkbox_stories_CheckboxPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const [checked, setChecked] = useState(false)\n\n const handleCheck = () => {\n setChecked((prev: boolean) => !prev)\n }\n return (\n
\n \n
\n )\n}'}},Checkbox_stories_CheckboxPlaygroundStory.parameters);try{Checkbox_stories_CheckboxPlaygroundStory.displayName="CheckboxPlaygroundStory",Checkbox_stories_CheckboxPlaygroundStory.__docgenInfo={description:"",displayName:"CheckboxPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Checkbox.stories.tsx#CheckboxPlaygroundStory"]={docgenInfo:Checkbox_stories_CheckboxPlaygroundStory.__docgenInfo,name:"CheckboxPlaygroundStory",path:"stories/components/Checkbox.stories.tsx#CheckboxPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2894:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorPickersStory",(function(){return ColorPicker_stories_ColorPickersStory})),__webpack_require__.d(__webpack_exports__,"CustomColorPickersStory",(function(){return ColorPicker_stories_CustomColorPickersStory})),__webpack_require__.d(__webpack_exports__,"NamedColorPickersStory",(function(){return ColorPicker_stories_NamedColorPickersStory})),__webpack_require__.d(__webpack_exports__,"SmallColorPickerStory",(function(){return ColorPicker_stories_SmallColorPickerStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(2780),__webpack_require__(1454),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),dropdown=__webpack_require__(115),tooltip_tooltip=__webpack_require__(2907),COLORS=(__webpack_require__(2783),["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"]),_isNamedColor=function _isNamedColor(color){return"string"!=typeof color};function ColorPicker(_ref){var backgroundColor,_ref$color=_ref.color,color=void 0===_ref$color?0:_ref$color,small=_ref.small,onChange=_ref.onChange,_ref$colorList=_ref.colorList,colorList=void 0===_ref$colorList?COLORS:_ref$colorList;return react_default.a.createElement(dropdown.a.Box,{right:!0,className:"reactist_color_picker"},react_default.a.createElement(dropdown.a.Trigger,null,(backgroundColor=function _getColor(colorList,colorIndex){return colorList[colorIndex>=colorList.length?0:colorIndex]}(colorList,color),react_default.a.createElement("span",{className:classnames_default()("color_trigger",{small:small}),style:{backgroundColor:_isNamedColor(backgroundColor)?backgroundColor.color:backgroundColor}},react_default.a.createElement("span",{className:"color_trigger--inner_ring"})))),react_default.a.createElement(dropdown.a.Body,null,react_default.a.createElement("div",{className:"color_options"},colorList.reduce((function(items,currentColor,currentIndex){return items.push(react_default.a.createElement(ColorItem,{isActive:color>=colorList.length?0===currentIndex:currentIndex===color,key:currentIndex,color:_isNamedColor(currentColor)?currentColor.color:currentColor,colorIndex:currentIndex,onClick:onChange,tooltip:_isNamedColor(currentColor)?currentColor.name:null})),items}),[]))))}function ColorItem(_ref2){var color=_ref2.color,colorIndex=_ref2.colorIndex,isActive=_ref2.isActive,_onClick=_ref2.onClick,tooltip=_ref2.tooltip,item=react_default.a.createElement("span",{className:"reactist color_item"+(isActive?" active":""),style:{backgroundColor:color},onClick:function onClick(){return _onClick&&_onClick(colorIndex)}},react_default.a.createElement("span",{className:"color_item--inner_ring"}));return tooltip?react_default.a.createElement(tooltip_tooltip.a,{content:tooltip},item):item}ColorPicker.displayName="ColorPicker",ColorPicker.displayName="ColorPicker",ColorItem.displayName="ColorItem";try{ColorPicker.displayName="ColorPicker",ColorPicker.__docgenInfo={description:"",displayName:"ColorPicker",props:{small:{defaultValue:null,description:"",name:"small",required:!1,type:{name:"boolean | undefined"}},color:{defaultValue:{value:"0"},description:"",name:"color",required:!1,type:{name:"number | undefined"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((color: number) => void) | undefined"}},colorList:{defaultValue:null,description:"",name:"colorList",required:!1,type:{name:"(string | NamedColor)[] | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/color-picker/color-picker.tsx#ColorPicker"]={docgenInfo:ColorPicker.__docgenInfo,name:"ColorPicker",path:"src/components/color-picker/color-picker.tsx#ColorPicker"})}catch(__react_docgen_typescript_loader_error){}try{ColorItem.displayName="ColorItem",ColorItem.__docgenInfo={description:"",displayName:"ColorItem",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}},colorIndex:{defaultValue:null,description:"",name:"colorIndex",required:!0,type:{name:"number"}},isActive:{defaultValue:null,description:"",name:"isActive",required:!1,type:{name:"boolean | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"((colorIndex: number) => void) | undefined"}},tooltip:{defaultValue:null,description:"",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/color-picker/color-picker.tsx#ColorItem"]={docgenInfo:ColorItem.__docgenInfo,name:"ColorItem",path:"src/components/color-picker/color-picker.tsx#ColorItem"})}catch(__react_docgen_typescript_loader_error){}var components_color_picker=ColorPicker;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Color Picker

\n \n
\n )\n}'}},ColorPicker_stories_ColorPickersStory.parameters),ColorPicker_stories_CustomColorPickersStory.parameters=_objectSpread({storySource:{source:"() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Custom Colors Color Picker

\n \n
\n )\n}"}},ColorPicker_stories_CustomColorPickersStory.parameters),ColorPicker_stories_NamedColorPickersStory.parameters=_objectSpread({storySource:{source:"() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Named Colors Color Picker

\n \n
\n )\n}"}},ColorPicker_stories_NamedColorPickersStory.parameters),ColorPicker_stories_SmallColorPickerStory.parameters=_objectSpread({storySource:{source:'() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Small Color Picker

\n \n
\n )\n}'}},ColorPicker_stories_SmallColorPickerStory.parameters)},2895:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ErrorMessageStory",(function(){return ErrorMessage_stories_ErrorMessageStory})),__webpack_require__.d(__webpack_exports__,"ErrorMessagePlaygroundStory",(function(){return ErrorMessage_stories_ErrorMessagePlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react);__webpack_require__(656),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(2788);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i0}},{key:"render",value:function render(){var message=this.props.message;return!(!this.state.visible||!this._isValidMessage(message))&&react_default.a.createElement("div",{className:"reactist_error_message"},react_default.a.createElement("p",null,message),react_default.a.createElement("div",{onClick:this._hide,className:"dismiss_icon"}))}}]),ErrorMessage}(react_default.a.Component);_defineProperty(error_message_ErrorMessage,"displayName",void 0),_defineProperty(error_message_ErrorMessage,"defaultProps",void 0),error_message_ErrorMessage.displayName="ErrorMessage",error_message_ErrorMessage.defaultProps={timeout:2500};try{error_message_ErrorMessage.displayName="ErrorMessage",error_message_ErrorMessage.__docgenInfo={description:"",displayName:"ErrorMessage",props:{timeout:{defaultValue:{value:"2500"},description:"",name:"timeout",required:!1,type:{name:"number | undefined"}},onHide:{defaultValue:null,description:"",name:"onHide",required:!1,type:{name:"(() => void) | undefined"}},message:{defaultValue:null,description:"",name:"message",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/error-message/error-message.tsx#ErrorMessage"]={docgenInfo:error_message_ErrorMessage.__docgenInfo,name:"ErrorMessage",path:"src/components/error-message/error-message.tsx#ErrorMessage"})}catch(__react_docgen_typescript_loader_error){}var components_error_message=error_message_ErrorMessage;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n
\n)'}},ErrorMessage_stories_ErrorMessageStory.parameters),ErrorMessage_stories_ErrorMessagePlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},ErrorMessage_stories_ErrorMessagePlaygroundStory.parameters);try{ErrorMessage_stories_ErrorMessagePlaygroundStory.displayName="ErrorMessagePlaygroundStory",ErrorMessage_stories_ErrorMessagePlaygroundStory.__docgenInfo={description:"",displayName:"ErrorMessagePlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/ErrorMessage.stories.tsx#ErrorMessagePlaygroundStory"]={docgenInfo:ErrorMessage_stories_ErrorMessagePlaygroundStory.__docgenInfo,name:"ErrorMessagePlaygroundStory",path:"stories/components/ErrorMessage.stories.tsx#ErrorMessagePlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2896:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InputStory",(function(){return Input_stories_InputStory})),__webpack_require__.d(__webpack_exports__,"InputPlaygroundStory",(function(){return Input_stories_InputPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(47),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2795);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i void) | RefObject | null | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/input/input.tsx#Input"]={docgenInfo:Input.__docgenInfo,name:"Input",path:"src/components/input/input.tsx#Input"})}catch(__react_docgen_typescript_loader_error){}var components_input=Input;__webpack_require__(2793);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i")," element which justs add a class name to give it is unique style. All properties you pass to it (e.g. *value* or *onChange*) are directly applied onto the underlying ",react_default.a.createElement("code",null,"")," element.")),react_default.a.createElement(components_input,{placeholder:"Simple input wrapper"}))};Input_stories_InputStory.displayName="InputStory";var Input_stories_InputPlaygroundStory=function InputPlaygroundStory(args){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(components_input,args))};Input_stories_InputPlaygroundStory.displayName="InputPlaygroundStory",Input_stories_InputPlaygroundStory.args={placeholder:"Simple input wrapper",disabled:!1},Input_stories_InputPlaygroundStory.argTypes={placeholder:{control:{type:"text"}},disabled:{control:{type:"boolean"}},className:{control:{type:null}}},Input_stories_InputStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n
\n

\n This component is a dumb wrapper around the\n <input /> element which justs add a class name to give it is\n unique style. All properties you pass to it (e.g. *value* or *onChange*) are\n directly applied onto the underlying <input /> element.\n

\n
\n \n
\n)'}},Input_stories_InputStory.parameters),Input_stories_InputPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Input_stories_InputPlaygroundStory.parameters);try{Input_stories_InputPlaygroundStory.displayName="InputPlaygroundStory",Input_stories_InputPlaygroundStory.__docgenInfo={description:"",displayName:"InputPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Input.stories.tsx#InputPlaygroundStory"]={docgenInfo:Input_stories_InputPlaygroundStory.__docgenInfo,name:"InputPlaygroundStory",path:"stories/components/Input.stories.tsx#InputPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2897:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoadingStory",(function(){return Loading_stories_LoadingStory})),__webpack_require__.d(__webpack_exports__,"LoadingPlaygroundStory",(function(){return Loading_stories_LoadingPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2806);function Loading(_ref){var className=_ref.className,_ref$spinnerColor=_ref.spinnerColor,spinnerColor=void 0===_ref$spinnerColor?"#3F82EF":_ref$spinnerColor,_ref$bgColor=_ref.bgColor,bgColor=void 0===_ref$bgColor?"#D9E6FB":_ref$bgColor,_ref$size=_ref.size,size=void 0===_ref$size?24:_ref$size,_ref$ariaLabel=_ref["aria-label"],ariaLabel=void 0===_ref$ariaLabel?"Loading":_ref$ariaLabel;return react_default.a.createElement("div",{className:classnames_default()("reactist_loading",className),"aria-label":ariaLabel,"aria-live":"assertive",role:"alert"},react_default.a.createElement("span",{className:"reactist_loading--spinner"},react_default.a.createElement("svg",{width:size,height:size,viewBox:"0 0 24 24"},react_default.a.createElement("g",{fill:"none",fillRule:"nonzero"},react_default.a.createElement("path",{fill:spinnerColor,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),react_default.a.createElement("path",{fill:bgColor,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))))}Loading.displayName="Loading",Loading.displayName="Loading";try{Loading.displayName="Loading",Loading.__docgenInfo={description:"",displayName:"Loading",props:{className:{defaultValue:null,description:"Additional css class that is applied to Loading.",name:"className",required:!1,type:{name:"string | undefined"}},spinnerColor:{defaultValue:{value:"#3F82EF"},description:"Hex code of the spinner color.",name:"spinnerColor",required:!1,type:{name:"string | undefined"}},bgColor:{defaultValue:{value:"#D9E6FB"},description:"Hex code of the background color.",name:"bgColor",required:!1,type:{name:"string | undefined"}},size:{defaultValue:{value:"24"},description:"Circle diameter in pixels.",name:"size",required:!1,type:{name:"string | number | undefined"}},"aria-label":{defaultValue:null,description:"",name:"aria-label",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loading/loading.tsx#Loading"]={docgenInfo:Loading.__docgenInfo,name:"Loading",path:"src/components/loading/loading.tsx#Loading"})}catch(__react_docgen_typescript_loader_error){}var components_loading=Loading;__webpack_require__(2804);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Loading

\n \n
\n)'}},Loading_stories_LoadingStory.parameters),Loading_stories_LoadingPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Loading_stories_LoadingPlaygroundStory.parameters);try{Loading_stories_LoadingPlaygroundStory.displayName="LoadingPlaygroundStory",Loading_stories_LoadingPlaygroundStory.__docgenInfo={description:"",displayName:"LoadingPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Loading.stories.tsx#LoadingPlaygroundStory"]={docgenInfo:Loading_stories_LoadingPlaygroundStory.__docgenInfo,name:"LoadingPlaygroundStory",path:"stories/components/Loading.stories.tsx#LoadingPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2898:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"SimpleMenuExample",(function(){return Menu_stories_SimpleMenuExample})),__webpack_require__.d(__webpack_exports__,"OverflowMenuExample",(function(){return Menu_stories_OverflowMenuExample}));__webpack_require__(244),__webpack_require__(473),__webpack_require__(152),__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2808);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),classnames=(__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);function forwardRefWithAs(render){return react.forwardRef(render)}var MenuState=__webpack_require__(2929),Menu_MenuButton=__webpack_require__(2928),Menu=__webpack_require__(2926),Menu_MenuItem=__webpack_require__(2927),MenuGroup=__webpack_require__(2925),PopoverBackdrop=__webpack_require__(2931);__webpack_require__(2845);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var MenuContext=react.createContext({});function menu_Menu(_ref){var children=_ref.children,onItemSelect=_ref.onItemSelect,props=_objectWithoutProperties(_ref,["children","onItemSelect"]),state=MenuState.a(_objectSpread({loop:!0},props)),handleItemSelect=react.useCallback((function handleItemSelect(value){onItemSelect&&onItemSelect(value)}),[onItemSelect]),value=react.useMemo((function(){return _objectSpread(_objectSpread({},state),{},{handleItemSelect:handleItemSelect})}),[state,handleItemSelect]);return react.createElement(MenuContext.Provider,{value:value},children)}menu_Menu.displayName="Menu";var menu_MenuButton=forwardRefWithAs((function MenuButton(_ref2,ref){var className=_ref2.className,props=_objectWithoutProperties(_ref2,["className"]),_React$useContext=react.useContext(MenuContext),state=(_React$useContext.handleItemSelect,_objectWithoutProperties(_React$useContext,["handleItemSelect"]));return react.createElement(Menu_MenuButton.a,_extends({},props,state,{ref:ref,className:classnames_default()("reactist_menubutton",className)}))})),BACKDROP_STYLE={width:"100%",height:"100%",position:"fixed",top:0,left:0};function MenuBackdrop(_ref3){var baseId=_ref3.baseId,visible=_ref3.visible,animated=_ref3.animated,animating=_ref3.animating,stopAnimation=_ref3.stopAnimation,modal=_ref3.modal,children=_ref3.children;return react.createElement(PopoverBackdrop.a,{baseId:baseId,visible:visible,animated:animated,animating:animating,stopAnimation:stopAnimation,modal:modal,style:BACKDROP_STYLE},children)}MenuBackdrop.displayName="MenuBackdrop";var menu_MenuList=forwardRefWithAs((function MenuList(_ref4,ref){var className=_ref4.className,props=_objectWithoutProperties(_ref4,["className"]),_React$useContext2=react.useContext(MenuContext),state=(_React$useContext2.handleItemSelect,_objectWithoutProperties(_React$useContext2,["handleItemSelect"]));return state.visible?react.createElement(MenuBackdrop,state,react.createElement(Menu.a,_extends({},props,state,{ref:ref,className:classnames_default()("reactist_menulist",className)}))):null})),menu_MenuItem=forwardRefWithAs((function MenuItem(_ref5,ref){var value=_ref5.value,children=_ref5.children,onSelect=_ref5.onSelect,_ref5$hideOnSelect=_ref5.hideOnSelect,hideOnSelect=void 0===_ref5$hideOnSelect||_ref5$hideOnSelect,onClick=_ref5.onClick,props=_objectWithoutProperties(_ref5,["value","children","onSelect","hideOnSelect","onClick"]),_React$useContext3=react.useContext(MenuContext),handleItemSelect=_React$useContext3.handleItemSelect,state=_objectWithoutProperties(_React$useContext3,["handleItemSelect"]),hide=state.hide,handleClick=react.useCallback((function handleClick(event){null==onClick||onClick(event);var shouldClose=!1!==(onSelect&&!event.defaultPrevented?onSelect():void 0)&&hideOnSelect;handleItemSelect(value),shouldClose&&hide()}),[onSelect,onClick,handleItemSelect,hideOnSelect,hide,value]);return react.createElement(Menu_MenuItem.a,_extends({},props,state,{ref:ref,onClick:handleClick}),children)})),menu_SubMenu=react.forwardRef((function SubMenu(_ref6,ref){var children=_ref6.children,onItemSelect=_ref6.onItemSelect,props=_objectWithoutProperties(_ref6,["children","onItemSelect"]),_React$useContext4=react.useContext(MenuContext),parentMenuItemSelect=_React$useContext4.handleItemSelect,state=_objectWithoutProperties(_React$useContext4,["handleItemSelect"]),parentMenuHide=state.hide,handleSubItemSelect=react.useCallback((function handleSubItemSelect(value){onItemSelect&&onItemSelect(value),parentMenuItemSelect(value),parentMenuHide()}),[parentMenuHide,parentMenuItemSelect,onItemSelect]),_React$Children$toArr2=_slicedToArray(react.Children.toArray(children),2),button=_React$Children$toArr2[0],list=_React$Children$toArr2[1];return react.createElement(Menu_MenuItem.a,_extends({},state,props,{ref:ref}),(function(buttonProps){return react.createElement(menu_Menu,{onItemSelect:handleSubItemSelect},react.cloneElement(button,_objectSpread(_objectSpread({},buttonProps),{},{className:classnames_default()(buttonProps.className,"reactist_submenu_button")})),list)}))})),menu_MenuGroup=forwardRefWithAs((function MenuGroud(_ref7,ref){var label=_ref7.label,children=_ref7.children,props=_objectWithoutProperties(_ref7,["label","children"]),_React$useContext5=react.useContext(MenuContext),state=(_React$useContext5.handleItemSelect,_objectWithoutProperties(_React$useContext5,["handleItemSelect"]));return react.createElement(MenuGroup.a,_extends({ref:ref},props,state),label?react.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},label):null,children)}));try{menu_Menu.displayName="Menu",menu_Menu.__docgenInfo={description:"Wrapper component to control a menu. It does not render anything, only providing the state\nmanagement for the menu components inside it.",displayName:"Menu",props:{baseId:{defaultValue:null,description:"ID that will serve as a base for all the items IDs.",name:"baseId",required:!1,type:{name:"string | undefined"}},animated:{defaultValue:null,description:"If `true`, `animating` will be set to `true` when `visible` is updated.\nIt'll wait for `stopAnimation` to be called or a CSS transition ends.\nIf `animated` is set to a `number`, `stopAnimation` will be called only\nafter the same number of milliseconds have passed.",name:"animated",required:!1,type:{name:"number | boolean | undefined"}},modal:{defaultValue:null,description:"Toggles Dialog's `modal` state.\n - Non-modal: `preventBodyScroll` doesn't work and focus is free.\n - Modal: `preventBodyScroll` is automatically enabled, focus is\ntrapped within the dialog and the dialog is rendered within a `Portal`\nby default.",name:"modal",required:!1,type:{name:"boolean | undefined"}},placement:{defaultValue:null,description:"Actual `placement`.",name:"placement",required:!1,type:{name:'"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | undefined'}},wrap:{defaultValue:{value:"false"},description:"**Has effect only on two-dimensional composites**. If enabled, moving to\nthe next item from the last one in a row or column will focus the first\nitem in the next row or column and vice-versa.\n - `true` wraps between rows and columns.\n - `horizontal` wraps only between rows.\n - `vertical` wraps only between columns.\n - If `loop` matches the value of `wrap`, it'll wrap between the last\nitem in the last row or column and the first item in the first row or\ncolumn and vice-versa.",name:"wrap",required:!1,type:{name:'boolean | "horizontal" | "vertical" | undefined'}},unstable_virtual:{defaultValue:{value:"false"},description:"If enabled, the composite element will act as an\n[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)\ncontainer instead of\n[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).\nDOM focus will remain on the composite while its items receive virtual focus.",name:"unstable_virtual",required:!1,type:{name:"boolean | undefined"}},rtl:{defaultValue:{value:"false"},description:'Determines how `next` and `previous` functions will behave. If `rtl` is\nset to `true`, they will be inverted. This only affects the composite\nwidget behavior. You still need to set `dir="rtl"` on HTML/CSS.',name:"rtl",required:!1,type:{name:"boolean | undefined"}},orientation:{defaultValue:{value:"undefined"},description:"Defines the orientation of the composite widget. If the composite has a\nsingle row or column (one-dimensional), the `orientation` value determines\nwhich arrow keys can be used to move focus:\n - `undefined`: all arrow keys work.\n - `horizontal`: only left and right arrow keys work.\n - `vertical`: only up and down arrow keys work.\n\nIt doesn't have any effect on two-dimensional composites.",name:"orientation",required:!1,type:{name:'"horizontal" | "vertical" | undefined'}},currentId:{defaultValue:{value:"undefined"},description:'The current focused item `id`.\n - `undefined` will automatically focus the first enabled composite item.\n - `null` will focus the base composite element and users will be able to\nnavigate out of it using arrow keys.\n - If `currentId` is initially set to `null`, the base composite element\nitself will have focus and users will be able to navigate to it using\narrow keys.\n@example // First enabled item has initial focus\nuseCompositeState();\n// Base composite element has initial focus\nuseCompositeState({ currentId: null });\n// Specific composite item element has initial focus\nuseCompositeState({ currentId: "item-id" });',name:"currentId",required:!1,type:{name:"string | null | undefined"}},loop:{defaultValue:{value:"false"},description:"On one-dimensional composites:\n - `true` loops from the last item to the first item and vice-versa.\n - `horizontal` loops only if `orientation` is `horizontal` or not set.\n - `vertical` loops only if `orientation` is `vertical` or not set.\n - If `currentId` is initially set to `null`, the composite element will\nbe focused in between the last and first items.\n\nOn two-dimensional composites:\n - `true` loops from the last row/column item to the first item in the\nsame row/column and vice-versa. If it's the last item in the last row, it\nmoves to the first item in the first row and vice-versa.\n - `horizontal` loops only from the last row item to the first item in\nthe same row.\n - `vertical` loops only from the last column item to the first item in\nthe column row.\n - If `currentId` is initially set to `null`, vertical loop will have no\neffect as moving down from the last row or up from the first row will\nfocus the composite element.\n - If `wrap` matches the value of `loop`, it'll wrap between the last\nitem in the last row or column and the first item in the first row or\ncolumn and vice-versa.",name:"loop",required:!1,type:{name:'boolean | "horizontal" | "vertical" | undefined'}},shift:{defaultValue:{value:"false"},description:"**Has effect only on two-dimensional composites**. If enabled, moving up\nor down when there's no next item or the next item is disabled will shift\nto the item right before it.",name:"shift",required:!1,type:{name:"boolean | undefined"}},unstable_includesBaseElement:{defaultValue:{value:"false"},description:"@private",name:"unstable_includesBaseElement",required:!1,type:{name:"boolean | undefined"}},unstable_values:{defaultValue:null,description:"Stores the values of radios and checkboxes within the menu.",name:"unstable_values",required:!1,type:{name:"Record | undefined"}},unstable_fixed:{defaultValue:null,description:"Whether or not the popover should have `position` set to `fixed`.",name:"unstable_fixed",required:!1,type:{name:"boolean | undefined"}},unstable_flip:{defaultValue:null,description:"Flip the popover's placement when it starts to overlap its reference\nelement.",name:"unstable_flip",required:!1,type:{name:"boolean | undefined"}},unstable_offset:{defaultValue:null,description:"Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`.",name:"unstable_offset",required:!1,type:{name:"[ReactText, ReactText] | undefined"}},gutter:{defaultValue:null,description:"Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`.",name:"gutter",required:!1,type:{name:"number | undefined"}},unstable_preventOverflow:{defaultValue:null,description:"Prevents popover from being positioned outside the boundary.",name:"unstable_preventOverflow",required:!1,type:{name:"boolean | undefined"}},children:{defaultValue:null,description:"The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n`MenuButton` that triggers the menu to be opened or closed.",name:"children",required:!0,type:{name:"ReactNode"}},onItemSelect:{defaultValue:null,description:"An optional callback that will be called back whenever a menu item is selected. It receives\nthe `value` of the selected `MenuItem`.\n\nIf you pass down this callback, it is recommended that you properly memoize it so it does not\nchange on every render.",name:"onItemSelect",required:!1,type:{name:"((value: string | null | undefined) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/menu/menu.tsx#Menu"]={docgenInfo:menu_Menu.__docgenInfo,name:"Menu",path:"src/components/menu/menu.tsx#Menu"})}catch(__react_docgen_typescript_loader_error){}try{menu_SubMenu.displayName="SubMenu",menu_SubMenu.__docgenInfo={description:'This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\na sub-menu.\n\nIts children are expected to have the structure of a first level menu (a `MenuButton` and a\n`MenuList`).\n\n```jsx\n\n\n More options\n \n \n \n \n\n```\n\nThe `MenuButton` will become a menu item in the current menu items list, and it will lead to\nopening a sub-menu with the menu items list below it.',displayName:"SubMenu",props:{children:{defaultValue:null,description:"The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n`MenuButton` that triggers the menu to be opened or closed.",name:"children",required:!0,type:{name:"ReactNode"}},onItemSelect:{defaultValue:null,description:"An optional callback that will be called back whenever a menu item is selected. It receives\nthe `value` of the selected `MenuItem`.\n\nIf you pass down this callback, it is recommended that you properly memoize it so it does not\nchange on every render.",name:"onItemSelect",required:!1,type:{name:"((value: string | null | undefined) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/menu/menu.tsx#SubMenu"]={docgenInfo:menu_SubMenu.__docgenInfo,name:"SubMenu",path:"src/components/menu/menu.tsx#SubMenu"})}catch(__react_docgen_typescript_loader_error){}var keyboard_shortcut=__webpack_require__(487),components_button=__webpack_require__(16);function Menu_stories_ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function Menu_stories_objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [flag, setFlag] = React.useState(false)\n return (\n
\n

Some menu examples

\n \n \n Simple menu \n \n \n Edit\n Duplicate\n Remove\n \n \n \n \n With sub-menu \n \n \n \n Reactist on Github\n \n About Reactist…\n Check for updates…\n
\n \n Preferences\n \n Settings\n Extensions\n
\n Notifications\n \n \n \n \n \n \n With extra features \n \n \n \n \n ✏️\n \n Edit\n \n \n \n 👯‍♀️\n \n Duplicate\n Cmd + D\n \n {\n action(flag ? 'Toggle off' : 'Toggle on')(flag ? '👎' : '👍')\n setFlag((f) => !f)\n return false // This prevents the menu from closing\n }}\n >\n \n {flag ? '👍' : '👎'}\n \n Toggle thumbs up or down\n \n
\n \n Remove first\n Remove completed\n \n Remove all (disabled)\n \n \n \n \n
\n )\n}"}},Menu_stories_SimpleMenuExample.parameters),Menu_stories_OverflowMenuExample.parameters=Menu_stories_objectSpread({storySource:{source:'() => {\n return (\n
\n

A list of items with an overflow options menu

\n

\n This example is meant to be expanded with future features we plan to support (such\n as allowing to control the visible state of the menu from outside, and allow it to\n be used as a context menu).\n

\n
    \n {items.map((item, index) => (\n \n ))}\n
\n
\n )\n}'}},Menu_stories_OverflowMenuExample.parameters)},2899:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ProgressBarStory",(function(){return ProgressBar_stories_ProgressBarStory})),__webpack_require__.d(__webpack_exports__,"ProgressBarPlaygroundStory",(function(){return ProgressBar_stories_ProgressBarPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2857);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2859);function ProgressBar(_ref){var _ref$fillPercentage=_ref.fillPercentage,fillPercentage=void 0===_ref$fillPercentage?0:_ref$fillPercentage,className=_ref.className,finalClassName=classnames_default()("reactist_progress_bar",className),width=fillPercentage<0?0:fillPercentage>100?100:fillPercentage;return react_default.a.createElement("div",{className:finalClassName},react_default.a.createElement("div",{className:"inner",style:{width:"".concat(width,"%")}}))}ProgressBar.displayName="ProgressBar",ProgressBar.displayName="ProgressBar";try{ProgressBar.displayName="ProgressBar",ProgressBar.__docgenInfo={description:"",displayName:"ProgressBar",props:{className:{defaultValue:null,description:"Additional css class applied to the progress bar.",name:"className",required:!1,type:{name:"string | undefined"}},fillPercentage:{defaultValue:{value:"0"},description:"How much of the progress bar should be filled. Number between 0 and 100 inclusive.",name:"fillPercentage",required:!1,type:{name:"number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/progress-bar/progress-bar.tsx#ProgressBar"]={docgenInfo:ProgressBar.__docgenInfo,name:"ProgressBar",path:"src/components/progress-bar/progress-bar.tsx#ProgressBar"})}catch(__react_docgen_typescript_loader_error){}var components_progress_bar=ProgressBar;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Progress Bars

\n \n \n \n \n \n
\n)'}},ProgressBar_stories_ProgressBarStory.parameters),ProgressBar_stories_ProgressBarPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},ProgressBar_stories_ProgressBarPlaygroundStory.parameters);try{ProgressBar_stories_ProgressBarPlaygroundStory.displayName="ProgressBarPlaygroundStory",ProgressBar_stories_ProgressBarPlaygroundStory.__docgenInfo={description:"",displayName:"ProgressBarPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/ProgressBar.stories.tsx#ProgressBarPlaygroundStory"]={docgenInfo:ProgressBar_stories_ProgressBarPlaygroundStory.__docgenInfo,name:"ProgressBarPlaygroundStory",path:"stories/components/ProgressBar.stories.tsx#ProgressBarPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2900:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"RangeInputStory",(function(){return RangeInput_stories_RangeInputStory})),__webpack_require__.d(__webpack_exports__,"RangeInputPlaygroundStory",(function(){return RangeInput_stories_RangeInputPlaygroundStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(943),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2861);function RangeInput(_ref){var _ref$value=_ref.value,value=void 0===_ref$value?0:_ref$value,_ref$min=_ref.min,min=void 0===_ref$min?0:_ref$min,_ref$max=_ref.max,max=void 0===_ref$max?100:_ref$max,_ref$stepSize=_ref.stepSize,stepSize=void 0===_ref$stepSize?1:_ref$stepSize,onPlus=_ref.onPlus,onMinus=_ref.onMinus,_onChange=_ref.onChange,className=_ref.className;"function"!=typeof onPlus&&(onPlus=_onChange),"function"!=typeof onMinus&&(onMinus=_onChange);var rangeInputClassName=classnames_default()("reactist_range_input",className);return react_default.a.createElement("div",{className:rangeInputClassName},react_default.a.createElement("span",{className:"range_btn minus",onClick:function onClick(){return value>min&&onMinus&&onMinus(value-stepSize)}}),react_default.a.createElement("input",{value:value,className:"range_slider",type:"range",min:min,max:max,step:stepSize,onChange:function onChange(event){return _onChange&&_onChange(parseInt(event.target.value))}}),react_default.a.createElement("span",{className:"range_btn plus",onClick:function onClick(){return value void) | undefined"}},onMinus:{defaultValue:null,description:"Optional function that is called when minus button is clicked. If not supplied onChange will be called with the next value.",name:"onMinus",required:!1,type:{name:"((value: number) => void) | undefined"}},onChange:{defaultValue:null,description:"Callback function that is called whenever the range input value changes. When onPlus or onMinus is supplied this will not be called for button clicks.",name:"onChange",required:!1,type:{name:"((value: number) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/range-input/range-input.tsx#RangeInput"]={docgenInfo:RangeInput.__docgenInfo,name:"RangeInput",path:"src/components/range-input/range-input.tsx#RangeInput"})}catch(__react_docgen_typescript_loader_error){}var components_range_input=RangeInput;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [value, setValue] = useState(50)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n

RangeInput

\n \n
\n )\n}'}},RangeInput_stories_RangeInputStory.parameters),RangeInput_stories_RangeInputPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const [value, setValue] = useState(50)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n

Current Value: {value}

\n \n
\n )\n}'}},RangeInput_stories_RangeInputPlaygroundStory.parameters);try{RangeInput_stories_RangeInputPlaygroundStory.displayName="RangeInputPlaygroundStory",RangeInput_stories_RangeInputPlaygroundStory.__docgenInfo={description:"",displayName:"RangeInputPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/RangeInput.stories.tsx#RangeInputPlaygroundStory"]={docgenInfo:RangeInput_stories_RangeInputPlaygroundStory.__docgenInfo,name:"RangeInputPlaygroundStory",path:"stories/components/RangeInput.stories.tsx#RangeInputPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2901:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"SelectStory",(function(){return Select_stories_SelectStory})),__webpack_require__.d(__webpack_exports__,"SelectPlaygroundStory",(function(){return Select_stories_SelectPlaygroundStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(152),__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2865);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Select(_ref){var value=_ref.value,_ref$options=_ref.options,options=void 0===_ref$options?[]:_ref$options,_onChange=_ref.onChange,_ref$disabled=_ref.disabled,disabled=void 0===_ref$disabled||_ref$disabled,_ref$className=_ref.className,className=void 0===_ref$className?"":_ref$className,defaultValue=_ref.defaultValue,otherProps=_objectWithoutProperties(_ref,["value","options","onChange","disabled","className","defaultValue"]),selectClassName=classnames_default()("reactist_select",{disabled:disabled},className);return react_default.a.createElement("select",_extends({className:selectClassName,value:value,onChange:function onChange(event){return _onChange?_onChange(event.target.value):void 0},disabled:disabled,defaultValue:defaultValue},otherProps),options&&options.map((function(option){return react_default.a.createElement("option",{key:option.key||option.value,value:option.value,disabled:option.disabled},option.text)})))}Select.displayName="Select",Select.displayName="Select",Select.defaultProps={options:[],disabled:!1};try{Select.displayName="Select",Select.__docgenInfo={description:"",displayName:"Select",props:{className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},value:{defaultValue:null,description:"Currently selected value.",name:"value",required:!1,type:{name:"string | number | undefined"}},onChange:{defaultValue:null,description:"Callback for the change event. Will be called with the next value (not the full event).",name:"onChange",required:!1,type:{name:"((value: string) => void) | undefined"}},options:{defaultValue:{value:"[]"},description:"Options that are rendered in the select.",name:"options",required:!1,type:{name:"Option[] | undefined"}},defaultValue:{defaultValue:null,description:"Value to initially be set",name:"defaultValue",required:!1,type:{name:"string | number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/select/select.tsx#Select"]={docgenInfo:Select.__docgenInfo,name:"Select",path:"src/components/select/select.tsx#Select"})}catch(__react_docgen_typescript_loader_error){}var components_select=Select;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [value, setValue] = useState(options[0].value)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n \n
\n )\n}'}},Select_stories_SelectPlaygroundStory.parameters);try{Select_stories_SelectPlaygroundStory.displayName="SelectPlaygroundStory",Select_stories_SelectPlaygroundStory.__docgenInfo={description:"",displayName:"SelectPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Select.stories.tsx#SelectPlaygroundStory"]={docgenInfo:Select_stories_SelectPlaygroundStory.__docgenInfo,name:"SelectPlaygroundStory",path:"stories/components/Select.stories.tsx#SelectPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2902:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return inline_stories_InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return inline_stories_ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"NestedStackStory",(function(){return inline_stories_NestedStackStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),storybook_helper=__webpack_require__(5),stack=__webpack_require__(41),heading=__webpack_require__(30),type_helpers=(__webpack_require__(78),__webpack_require__(47),__webpack_require__(188)),responsive_props=__webpack_require__(21),box=__webpack_require__(144),inline_module=__webpack_require__(1563),inline_module_default=__webpack_require__.n(inline_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var inline_Inline=Object(type_helpers.a)((function Inline(_ref,ref){var component=_ref.component,space=_ref.space,_ref$align=_ref.align,align=void 0===_ref$align?"left":_ref$align,_ref$alignY=_ref.alignY,alignY=void 0===_ref$alignY?"center":_ref$alignY,children=_ref.children,props=_objectWithoutProperties(_ref,["component","space","align","alignY","children"]);return react.createElement(box.a,null,react.createElement(box.a,_extends({component:component,display:"flex",flexWrap:"wrap",className:Object(responsive_props.a)(inline_module_default.a,"space",space),ref:ref,alignItems:Object(responsive_props.b)(alignY,(function(alignY){return"top"===alignY?"flexStart":"bottom"===alignY?"flexEnd":"center"})),justifyContent:Object(responsive_props.b)(align,(function(align){return"left"===align?"flexStart":"right"===align?"flexEnd":"center"}))},props),children))}));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i) {\n return (\n \n {renderInlineContent()}\n \n )\n}'}},inline_stories_InteractivePropsStory.parameters),inline_stories_ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory() {\n return (\n <>\n \n \n \n {renderInlineContent()}\n \n \n \n {renderInlineContent()}\n \n \n \n \n )\n}"}},inline_stories_ResponsiveStory.parameters),inline_stories_NestedStackStory.parameters=_objectSpread({storySource:{source:'function NestedStackStory({ space }: PartialProps) {\n return (\n <>\n \n Parent stack with space=“{space ?? \'none\'}”\n {renderInlineContent()}\n {renderInlineContent()}\n \n \n )\n}'}},inline_stories_NestedStackStory.parameters);try{inline_stories_InteractivePropsStory.displayName="InteractivePropsStory",inline_stories_InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/inline/inline.stories.tsx#InteractivePropsStory"]={docgenInfo:inline_stories_InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/inline/inline.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}try{inline_stories_NestedStackStory.displayName="NestedStackStory",inline_stories_NestedStackStory.__docgenInfo={description:"",displayName:"NestedStackStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/inline/inline.stories.tsx#NestedStackStory"]={docgenInfo:inline_stories_NestedStackStory.__docgenInfo,name:"NestedStackStory",path:"src/new-components/inline/inline.stories.tsx#NestedStackStory"})}catch(__react_docgen_typescript_loader_error){}},2903:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TextStory",(function(){return text_stories_TextStory})),__webpack_require__.d(__webpack_exports__,"TruncatedTextStory",(function(){return text_stories_TruncatedTextStory})),__webpack_require__.d(__webpack_exports__,"TextPlaygroundStory",(function(){return text_stories_TextPlaygroundStory}));__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),stack=__webpack_require__(41),responsive_props=(__webpack_require__(943),__webpack_require__(124),__webpack_require__(1462),__webpack_require__(1464),__webpack_require__(47),__webpack_require__(21)),box=__webpack_require__(144),type_helpers=__webpack_require__(188),text_module=__webpack_require__(325),text_module_default=__webpack_require__.n(text_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var text_Text=Object(type_helpers.a)((function Text(_ref,ref){var _ref$component=_ref.component,component=void 0===_ref$component?"span":_ref$component,_ref$size=_ref.size,size=void 0===_ref$size?"standard":_ref$size,_ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,_ref$tone=_ref.tone,tone=void 0===_ref$tone?"normal":_ref$tone,children=_ref.children,lineClamp=_ref.lineClamp,rest=_objectWithoutProperties(_ref,["component","size","weight","tone","children","lineClamp"]),lineClampMultipleLines="string"==typeof lineClamp?parseInt(lineClamp,10)>1:(lineClamp||0)>1;return react.createElement(box.a,_extends({},rest,{component:component,className:[text_module_default.a.text,"standard"!==size?Object(responsive_props.a)(text_module_default.a,"size",size):null,"regular"!==weight?Object(responsive_props.a)(text_module_default.a,"weight",weight):null,"normal"!==tone?Object(responsive_props.a)(text_module_default.a,"tone",tone):null,lineClampMultipleLines?text_module_default.a.lineClamp:null,lineClamp?Object(responsive_props.a)(text_module_default.a,"line-clamp",lineClamp.toString()):null],ref:ref}),children)})),storybook_helper=__webpack_require__(5);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__webpack_exports__.default={title:"Design system/Text",component:text_Text,argTypes:{size:Object(storybook_helper.f)(["xsmall","small","standard","large","xlarge"],"standard"),weight:Object(storybook_helper.f)(["regular","medium","strong"],"regular"),lineClamp:Object(storybook_helper.f)([1,2,3,4,5],1),children:{control:{type:"text"},defaultValue:"Lorem ipsum dolor sit amet consectetur, adipisicing elit"},tone:Object(storybook_helper.f)(["normal","secondary","danger"],"normal")}};var text_stories_TextStory=function TextStory(){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(stack.a,{space:"medium"},react_default.a.createElement(text_Text,{size:"xlarge",weight:"strong",tone:"secondary"},"Text, xlarge, strong, secondary (16px)"),react_default.a.createElement(text_Text,{size:"xlarge",weight:"strong",tone:"danger"},"Text, xlarge, strong, danger"),react_default.a.createElement(text_Text,{size:"xlarge",weight:"strong"},"Text, xlarge, strong"),react_default.a.createElement(text_Text,{size:"xlarge",weight:"medium"},"Text, xlarge, medium"),react_default.a.createElement(text_Text,{size:"xlarge",weight:"regular"},"Text, xlarge, regular"),react_default.a.createElement(text_Text,{size:"large",weight:"strong",tone:"secondary"},"Text, large, strong, secondary (16px)"),react_default.a.createElement(text_Text,{size:"large",weight:"strong",tone:"danger"},"Text, large, strong, danger"),react_default.a.createElement(text_Text,{size:"large",weight:"strong"},"Text, large, strong"),react_default.a.createElement(text_Text,{size:"large",weight:"medium"},"Text, large, medium"),react_default.a.createElement(text_Text,{size:"large",weight:"regular"},"Text, large, regular"),react_default.a.createElement(text_Text,{size:"standard",weight:"strong",tone:"secondary"},"Text, standard, strong, secondary (14px)"),react_default.a.createElement(text_Text,{size:"standard",weight:"strong",tone:"danger"},"Text, standard, strong, danger"),react_default.a.createElement(text_Text,{size:"standard",weight:"strong"},"Text, standard, strong"),react_default.a.createElement(text_Text,{size:"standard",weight:"medium"},"Text, standard, medium"),react_default.a.createElement(text_Text,{size:"standard",weight:"regular"},"Text, standard, regular"),react_default.a.createElement(text_Text,{size:"small",weight:"strong",tone:"secondary"},"Text, small, strong, secondary (12px)"),react_default.a.createElement(text_Text,{size:"small",weight:"strong",tone:"danger"},"Text, small, strong, danger"),react_default.a.createElement(text_Text,{size:"small",weight:"strong"},"Text, small, strong"),react_default.a.createElement(text_Text,{size:"small",weight:"medium"},"Text, small, medium"),react_default.a.createElement(text_Text,{size:"small",weight:"regular"},"Text, small, regular"),react_default.a.createElement(text_Text,{size:"xsmall",weight:"strong",tone:"secondary"},"Text, xsmall, strong, secondary (10px)"),react_default.a.createElement(text_Text,{size:"xsmall",weight:"strong",tone:"danger"},"Text, xsmall, strong, danger"),react_default.a.createElement(text_Text,{size:"xsmall",weight:"strong"},"Text, xsmall, strong"),react_default.a.createElement(text_Text,{size:"xsmall",weight:"medium"},"Text, xsmall, medium"),react_default.a.createElement(text_Text,{size:"xsmall",weight:"regular"},"Text, ssmall, regular")))};text_stories_TextStory.displayName="TextStory";var text_stories_TruncatedTextStory=function TruncatedTextStory(){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(stack.a,{space:"medium"},react_default.a.createElement(text_Text,{lineClamp:1},"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a."),react_default.a.createElement(text_Text,{lineClamp:4},"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.")))};text_stories_TruncatedTextStory.displayName="TruncatedTextStory";var text_stories_TextPlaygroundStory=function TextPlaygroundStory(_ref){var children=_ref.children,args=text_stories_objectWithoutProperties(_ref,["children"]);return react_default.a.createElement("section",{className:"story playground"},react_default.a.createElement(text_Text,args,children))};text_stories_TextPlaygroundStory.displayName="TextPlaygroundStory",text_stories_TextStory.parameters=_objectSpread({storySource:{source:'function TextStory() {\n return (\n
\n \n \n Text, xlarge, strong, secondary (16px)\n \n \n Text, xlarge, strong, danger\n \n \n Text, xlarge, strong\n \n \n Text, xlarge, medium\n \n \n Text, xlarge, regular\n \n\n \n Text, large, strong, secondary (16px)\n \n \n Text, large, strong, danger\n \n \n Text, large, strong\n \n \n Text, large, medium\n \n \n Text, large, regular\n \n\n \n Text, standard, strong, secondary (14px)\n \n \n Text, standard, strong, danger\n \n \n Text, standard, strong\n \n \n Text, standard, medium\n \n \n Text, standard, regular\n \n\n \n Text, small, strong, secondary (12px)\n \n \n Text, small, strong, danger\n \n \n Text, small, strong\n \n \n Text, small, medium\n \n \n Text, small, regular\n \n\n \n Text, xsmall, strong, secondary (10px)\n \n \n Text, xsmall, strong, danger\n \n \n Text, xsmall, strong\n \n \n Text, xsmall, medium\n \n \n Text, ssmall, regular\n \n \n
\n )\n}'}},text_stories_TextStory.parameters),text_stories_TruncatedTextStory.parameters=_objectSpread({storySource:{source:'function TruncatedTextStory() {\n return (\n
\n \n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque\n recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus!\n Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum\n eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur\n tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla\n consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et\n ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque\n quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis\n temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis\n dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.\n \n\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque\n recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus!\n Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum\n eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur\n tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla\n consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et\n ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque\n quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis\n temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis\n dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.\n \n \n
\n )\n}'}},text_stories_TruncatedTextStory.parameters),text_stories_TextPlaygroundStory.parameters=_objectSpread({storySource:{source:'function TextPlaygroundStory({ children, ...args }: React.ComponentProps) {\n return (\n
\n {children}\n
\n )\n}'}},text_stories_TextPlaygroundStory.parameters);try{text_stories_TextPlaygroundStory.displayName="TextPlaygroundStory",text_stories_TextPlaygroundStory.__docgenInfo={description:"",displayName:"TextPlaygroundStory",props:{component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"small" | "large" | "standard" | "xsmall" | "xlarge" | undefined'}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"strong" | "medium" | "regular" | undefined'}},tone:{defaultValue:null,description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/text/text.stories.tsx#TextPlaygroundStory"]={docgenInfo:text_stories_TextPlaygroundStory.__docgenInfo,name:"TextPlaygroundStory",path:"src/new-components/text/text.stories.tsx#TextPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2904:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"StandardButtonsStory",(function(){return Button_stories_StandardButtonsStory})),__webpack_require__.d(__webpack_exports__,"SmallButtonsStory",(function(){return Button_stories_SmallButtonsStory})),__webpack_require__.d(__webpack_exports__,"LargeButtonsStory",(function(){return Button_stories_LargeButtonsStory})),__webpack_require__.d(__webpack_exports__,"DisabledButtonsStory",(function(){return Button_stories_DisabledButtonsStory})),__webpack_require__.d(__webpack_exports__,"LoadingButtonsStory",(function(){return Button_stories_LoadingButtonsStory})),__webpack_require__.d(__webpack_exports__,"AlternateBrandingButtonsStory",(function(){return Button_stories_AlternateBrandingButtonsStory})),__webpack_require__.d(__webpack_exports__,"ButtonPlaygroundStory",(function(){return Button_stories_ButtonPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_markdown=__webpack_require__(1566),react_markdown_default=__webpack_require__.n(react_markdown),components_button=(__webpack_require__(2771),__webpack_require__(16));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i .reactist_button {\n background-color: @primary-color;\n\n &--primary:not([disabled]):hover {\n background-color: @primary-color-darker;\n }\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary)&:disabled {\n background-color: @primary-color-lighter;\n }\n\n &.reactist_button--secondary {\n background-color: white;\n border: 1px solid @primary-color;\n color: @primary-color;\n }\n }\n }\n"}),react_default.a.createElement("br",null),react_default.a.createElement(components_button.a,{variant:"primary"},"Primary Button"),react_default.a.createElement(components_button.a,{variant:"secondary"},"Secondary Button"))};Button_stories_AlternateBrandingButtonsStory.displayName="AlternateBrandingButtonsStory";var Button_stories_ButtonPlaygroundStory=function ButtonPlaygroundStory(args){return react_default.a.createElement("section",{className:"story playground"},react_default.a.createElement(components_button.a,args,"Button Text"))};Button_stories_ButtonPlaygroundStory.displayName="ButtonPlaygroundStory",Button_stories_ButtonPlaygroundStory.args={variant:"primary",size:"default",disabled:!1,loading:!1,tooltip:""},Button_stories_ButtonPlaygroundStory.argTypes={disabled:"boolean",loading:"boolean",variant:{type:"select",options:["(none)","primary","secondary","danger","link"]},size:{type:"select",options:["default","small","large"]}},Button_stories_StandardButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n

\n You can and it works as\n you'd expect.\n

\n
\n )\n}'}},Button_stories_StandardButtonsStory.parameters),Button_stories_SmallButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_SmallButtonsStory.parameters),Button_stories_LargeButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_LargeButtonsStory.parameters),Button_stories_DisabledButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_DisabledButtonsStory.parameters),Button_stories_LoadingButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n

\n Note: loading has no effect on link or plain buttons. Use{\' \'}\n disabled instead.\n

\n
\n )\n}'}},Button_stories_LoadingButtonsStory.parameters),Button_stories_AlternateBrandingButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

\n If you want your buttons to have a different color scheme you need to import a\n .css file and overwrite the following rules:\n

\n \n
\n \n \n
\n )\n}'}},Button_stories_AlternateBrandingButtonsStory.parameters),Button_stories_ButtonPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n return (\n
\n \n
\n )\n}'}},Button_stories_ButtonPlaygroundStory.parameters);try{Button_stories_ButtonPlaygroundStory.displayName="ButtonPlaygroundStory",Button_stories_ButtonPlaygroundStory.__docgenInfo={description:"",displayName:"ButtonPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Button.stories.tsx#ButtonPlaygroundStory"]={docgenInfo:Button_stories_ButtonPlaygroundStory.__docgenInfo,name:"ButtonPlaygroundStory",path:"stories/components/Button.stories.tsx#ButtonPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2905:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"StandardNotificationStory",(function(){return Notification_stories_StandardNotificationStory})),__webpack_require__.d(__webpack_exports__,"NonClickableNotificationStory",(function(){return Notification_stories_NonClickableNotificationStory})),__webpack_require__.d(__webpack_exports__,"CustomContentNotificationStory",(function(){return Notification_stories_CustomContentNotificationStory})),__webpack_require__.d(__webpack_exports__,"NotificationPlaygroundStory",(function(){return Notification_stories_NotificationPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),avatar=__webpack_require__(251),tip=__webpack_require__(384),classnames=(__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),CloseIcon_svg=__webpack_require__(285);__webpack_require__(2853);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Notification(_ref){var id=_ref.id,icon=_ref.icon,title=_ref.title,subtitle=_ref.subtitle,children=_ref.children,customCloseButton=_ref.customCloseButton,onClick=_ref.onClick,onClose=_ref.onClose,_ref$closeAltText=_ref.closeAltText,closeAltText=void 0===_ref$closeAltText?"Close":_ref$closeAltText,className=_ref.className,rest=_objectWithoutProperties(_ref,["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className"]),titleId=title?"".concat(id,"-title"):null,titleIdAttribute=titleId?{id:titleId}:null,subtitleId=subtitle?"".concat(id,"-subtitle"):null,subtitleIdAttribute=subtitleId?{id:subtitleId}:null,contentId=children?"".concat(id,"-content"):null,contentIdAttribute=children?{id:"".concat(id,"-content")}:null,ariaLabelledBy=contentId?{"aria-labelledby":contentId}:titleId?{"aria-labelledby":titleId}:null,ariaDescribedBy=subtitleId&&!children?{"aria-describedby":subtitleId}:null,notificationContent=react_default.a.createElement("div",_extends({className:"reactist-notification__content"},contentIdAttribute),null!=children?children:react_default.a.createElement(react_default.a.Fragment,null,title?react_default.a.createElement("h3",_extends({className:"reactist-notification__title"},titleIdAttribute),title):null,subtitle?react_default.a.createElement("p",_extends({className:"reactist-notification__subtitle"},subtitleIdAttribute),subtitle):null)),notificationBody=react_default.a.createElement("div",{className:"reactist-notification__icon-content-group"},null!=icon?icon:null,notificationContent);return react_default.a.createElement("div",_extends({id:id,role:"dialog",className:classnames_default()("reactist-notification",className,{"reactist-notification--with-button":Boolean(onClick),"reactist-notification--with-close-button":Boolean(onClose)})},ariaLabelledBy,ariaDescribedBy,rest),onClick?react_default.a.createElement("button",{className:"reactist-notification__button",onClick:onClick},notificationBody):notificationBody,onClose?react_default.a.createElement("button",{className:"reactist-notification__close-button",onClick:onClose,"aria-label":closeAltText},null!=customCloseButton?customCloseButton:react_default.a.createElement(CloseIcon_svg.a,null)):null)}Notification.displayName="Notification";try{Notification.displayName="Notification",Notification.__docgenInfo={description:"",displayName:"Notification",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"ReactNode"}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"string | ({} & string) | (ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> & string) | (ReactNodeArray & string) | (ReactPortal & string) | undefined"}},subtitle:{defaultValue:null,description:"",name:"subtitle",required:!1,type:{name:"ReactNode"}},customCloseButton:{defaultValue:null,description:"",name:"customCloseButton",required:!1,type:{name:"ReactNode"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"(((event: MouseEvent) => void) & ((event: MouseEvent) => void)) | undefined"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"((event: MouseEvent) => void) | undefined"}},closeAltText:{defaultValue:{value:"Close"},description:"",name:"closeAltText",required:!1,type:{name:"string | undefined"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/notification/notification.tsx#Notification"]={docgenInfo:Notification.__docgenInfo,name:"Notification",path:"src/components/notification/notification.tsx#Notification"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(2851);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i {\n return (\n
\n

Standard Notification

\n }\n title="You have a new message!"\n subtitle="Click here to view."\n onClose={action(\'onClose\')}\n onClick={action(\'onClick\')}\n />\n
\n )\n}'}},Notification_stories_StandardNotificationStory.parameters),Notification_stories_NonClickableNotificationStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

Non-clickable Notification

\n \n
\n )\n}'}},Notification_stories_NonClickableNotificationStory.parameters),Notification_stories_CustomContentNotificationStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

Custom Content Notification

\n }\n onClose={action(\'onClose\')}\n className="notification-story-notification-container"\n >\n
\n

You received a message from Brock

\n

\n Better not leave him hanging\n \n

\n
\n \n
\n )\n}'}},Notification_stories_CustomContentNotificationStory.parameters),Notification_stories_NotificationPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const onClose = args.onClose ? action(\'onClose\') : undefined\n const onClick = args.onClick ? action(\'onClick\') : undefined\n const icon = args.icon ? (\n
\n \n
\n ) : null\n const children = args.children ? (\n
\n

\n If children is provided, then{\' \'}\n it will be rendered instead of the title and subtitle\n

\n
\n ) : null\n\n return (\n
\n \n {children}\n \n
\n )\n}'}},Notification_stories_NotificationPlaygroundStory.parameters);try{Notification_stories_NotificationPlaygroundStory.displayName="NotificationPlaygroundStory",Notification_stories_NotificationPlaygroundStory.__docgenInfo={description:"",displayName:"NotificationPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Notification.stories.tsx#NotificationPlaygroundStory"]={docgenInfo:Notification_stories_NotificationPlaygroundStory.__docgenInfo,name:"NotificationPlaygroundStory",path:"stories/components/Notification.stories.tsx#NotificationPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2906:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TabsStory",(function(){return Tabs_stories_TabsStory})),__webpack_require__.d(__webpack_exports__,"TabsPlaygroundStory",(function(){return Tabs_stories_TabsPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2867);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),classnames=(__webpack_require__(152),__webpack_require__(2869),__webpack_require__(2870),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2871);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/tabs.tsx#Tabs"]={docgenInfo:tabs_Tabs.__docgenInfo,name:"Tabs",path:"src/components/tabs/tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}try{tabs_Tab.displayName="Tab",tabs_Tab.__docgenInfo={description:"",displayName:"Tab",props:{className:{defaultValue:null,description:"Additional css class applied to Tab.",name:"className",required:!1,type:{name:"string | undefined"}},disabled:{defaultValue:{value:"false"},description:"Disabled tabs can't be selected.",name:"disabled",required:!1,type:{name:"boolean | undefined"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string | number | undefined"}},title:{defaultValue:null,description:"Title of the tab.",name:"title",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/tabs.tsx#Tab"]={docgenInfo:tabs_Tab.__docgenInfo,name:"Tab",path:"src/components/tabs/tabs.tsx#Tab"})}catch(__react_docgen_typescript_loader_error){}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i {\n return (\n
\n

Tabs

\n \n \n Content of Tab A\n \n \n Content of Tab B\n \n \n Content of Tab C\n \n \n
\n )\n}'}},Tabs_stories_TabsStory.parameters),Tabs_stories_TabsPlaygroundStory.parameters=_objectSpread({storySource:{source:"(args) => {\n return (\n
\n \n \n Content of Tab A\n \n \n Content of Tab B\n \n \n Content of Tab C\n \n \n
\n )\n}"}},Tabs_stories_TabsPlaygroundStory.parameters);try{Tabs_stories_TabsPlaygroundStory.displayName="TabsPlaygroundStory",Tabs_stories_TabsPlaygroundStory.__docgenInfo={description:"",displayName:"TabsPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tabs.stories.tsx#TabsPlaygroundStory"]={docgenInfo:Tabs_stories_TabsPlaygroundStory.__docgenInfo,name:"TabsPlaygroundStory",path:"stories/components/Tabs.stories.tsx#TabsPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2907:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Tooltip}));__webpack_require__(656),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(78),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__),classnames__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(22),classnames__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_13__),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(2908),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__(2909),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__(2910);__webpack_require__(2776);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i void) | undefined"}},unstable_popoverRef:{defaultValue:null,description:"The popover element.\n@private",name:"unstable_popoverRef",required:!1,type:{name:"RefObject | undefined"}},unstable_popoverStyles:{defaultValue:null,description:"Popover styles.\n@private",name:"unstable_popoverStyles",required:!1,type:{name:"CSSProperties | undefined"}},unstable_system:{defaultValue:null,description:"Options passed to `reakit-system-*`\n@private",name:"unstable_system",required:!1,type:{name:"any"}},unstable_portal:{defaultValue:null,description:"Whether or not the tooltip should be rendered within `Portal`.",name:"unstable_portal",required:!1,type:{name:"boolean | undefined"}},wrapElement:{defaultValue:null,description:"Function returned by the hook to wrap the element to which html props\nwill be passed.",name:"wrapElement",required:!1,type:{name:"((element: ReactNode) => ReactNode) | undefined"}},content:{defaultValue:null,description:"",name:"content",required:!0,type:{name:"string | number | boolean | {} | ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | ... 4 more ... | undefined"}},position:{defaultValue:{value:"top"},description:"",name:"position",required:!1,type:{name:'"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | undefined'}},gapSize:{defaultValue:{value:"3"},description:"",name:"gapSize",required:!1,type:{name:"number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tooltip/tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"src/components/tooltip/tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}},30:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Heading}));__webpack_require__(943),__webpack_require__(124),__webpack_require__(1462),__webpack_require__(1464),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(0),_responsive_props__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(21),_box__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(144),_heading_module_css__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(324),_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(_heading_module_css__WEBPACK_IMPORTED_MODULE_11__);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Heading=react__WEBPACK_IMPORTED_MODULE_8__.forwardRef((function Heading(_ref,ref){var level=_ref.level,_ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,size=_ref.size,_ref$tone=_ref.tone,tone=void 0===_ref$tone?"normal":_ref$tone,children=_ref.children,lineClamp=_ref.lineClamp,props=_objectWithoutProperties(_ref,["level","weight","size","tone","children","lineClamp"]),headingElementName="h".concat(level),lineClampMultipleLines="string"==typeof lineClamp?parseInt(lineClamp,10)>1:(lineClamp||0)>1;return react__WEBPACK_IMPORTED_MODULE_8__.createElement(_box__WEBPACK_IMPORTED_MODULE_10__.a,_extends({},props,{className:[_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a.heading,"regular"!==weight?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"weight",weight):null,"normal"!==tone?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"tone",tone):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"size",size),lineClampMultipleLines?_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a.lineClamp:null,lineClamp?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"line-clamp",lineClamp.toString()):null],component:headingElementName,ref:ref}),children)}));try{Heading.displayName="Heading",Heading.__docgenInfo={description:"",displayName:"Heading",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"smaller" | "larger" | "largest" | undefined'}},level:{defaultValue:null,description:"",name:"level",required:!0,type:{name:"HeadingLevel"}},weight:{defaultValue:{value:"regular"},description:"",name:"weight",required:!1,type:{name:'"regular" | "light" | undefined'}},tone:{defaultValue:{value:"normal"},description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/heading/heading.tsx#Heading"]={docgenInfo:Heading.__docgenInfo,name:"Heading",path:"src/new-components/heading/heading.tsx#Heading"})}catch(__react_docgen_typescript_loader_error){}},324:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2625);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},325:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2633);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},384:function(module,__webpack_exports__,__webpack_require__){"use strict";var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),ThinQuestionMarkIcon_svg_ThinQuestionMark=function ThinQuestionMark(){return react_default.a.createElement("svg",{width:"18px",height:"18px",viewBox:"0 0 18 18"},react_default.a.createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},react_default.a.createElement("g",{fill:"#979797"},react_default.a.createElement("path",{d:"M9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 Z M9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 Z",fillRule:"nonzero"}),react_default.a.createElement("path",{d:"M5.625,6.671875 L6.9609375,6.671875 C7.046875,5.5546875 7.796875,4.859375 8.9765625,4.859375 C10.140625,4.859375 10.890625,5.5703125 10.890625,6.5390625 C10.890625,7.375 10.5390625,7.8671875 9.6328125,8.421875 C8.5625,9.0625 8.0625,9.765625 8.0703125,10.796875 L8.0703125,11.515625 L9.4375,11.515625 L9.4375,11.0078125 C9.4375,10.1875 9.71875,9.75 10.7109375,9.1640625 C11.7109375,8.5625 12.34375,7.6953125 12.34375,6.46875 C12.34375,4.859375 11,3.640625 9.03125,3.640625 C6.8359375,3.640625 5.7109375,4.984375 5.625,6.671875 Z M8.859375,15.140625 C9.4921875,15.140625 9.9375,14.6875 9.9375,14.0546875 C9.9375,13.4140625 9.4921875,12.9609375 8.859375,12.9609375 C8.2265625,12.9609375 7.7734375,13.4140625 7.7734375,14.0546875 C7.7734375,14.6875 8.2265625,15.140625 8.859375,15.140625 Z"}))))};ThinQuestionMarkIcon_svg_ThinQuestionMark.displayName="ThinQuestionMark";var ThinQuestionMarkIcon_svg=ThinQuestionMarkIcon_svg_ThinQuestionMark,dropdown=__webpack_require__(115);__webpack_require__(2855);function Tip(_ref){var title=_ref.title,message=_ref.message,top=_ref.top,className=_ref.className,tipClass=classnames_default()("reactist_tip__container",className);return react_default.a.createElement(dropdown.a.Box,{top:top,className:tipClass},react_default.a.createElement(dropdown.a.Trigger,null,react_default.a.createElement(ThinQuestionMarkIcon_svg,null)),react_default.a.createElement(dropdown.a.Body,null,react_default.a.createElement("div",{className:"reactist_tip"},react_default.a.createElement("p",{className:"reactist_tip--title"},title),react_default.a.createElement("p",{className:"reactist_tip--message"},message))))}Tip.displayName="Tip",Tip.displayName="Tip",Tip.defaultProps={top:!1};try{Tip.displayName="Tip",Tip.__docgenInfo={description:"",displayName:"Tip",props:{className:{defaultValue:null,description:"Additional css class that is applied to the Tip.",name:"className",required:!1,type:{name:"string | undefined"}},title:{defaultValue:null,description:"Title of the tip.",name:"title",required:!1,type:{name:"ReactNode"}},message:{defaultValue:null,description:"Message of the tip.",name:"message",required:!1,type:{name:"ReactNode"}},top:{defaultValue:{value:"false"},description:"Whether the tip content should be displayed to the top or not. Maps to the Dropdown.Box top property.",name:"top",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tip/tip.tsx#Tip"]={docgenInfo:Tip.__docgenInfo,name:"Tip",path:"src/components/tip/tip.tsx#Tip"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=Tip},41:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return stack_Stack}));__webpack_require__(152),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),react_keyed_flatten_children=__webpack_require__(1561),react_keyed_flatten_children_default=__webpack_require__.n(react_keyed_flatten_children),type_helpers=__webpack_require__(188),responsive_props=__webpack_require__(21),box=__webpack_require__(144),divider_module=__webpack_require__(986),divider_module_default=__webpack_require__.n(divider_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Divider(_ref){var _ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,props=_objectWithoutProperties(_ref,["weight"]);return react.createElement(box.a,_extends({component:"hr",className:[divider_module_default.a.divider,"regular"!==weight?Object(responsive_props.a)(divider_module_default.a,"weight",weight):null]},props))}Divider.displayName="Divider";try{Divider.displayName="Divider",Divider.__docgenInfo={description:"",displayName:"Divider",props:{weight:{defaultValue:{value:"regular"},description:"",name:"weight",required:!1,type:{name:'"strong" | "regular" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/divider/divider.tsx#Divider"]={docgenInfo:Divider.__docgenInfo,name:"Divider",path:"src/new-components/divider/divider.tsx#Divider"})}catch(__react_docgen_typescript_loader_error){}var stack_module=__webpack_require__(1562),stack_module_default=__webpack_require__.n(stack_module);function stack_extends(){return(stack_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var stack_Stack=Object(type_helpers.a)((function Stack(_ref,ref){var component=_ref.component,space=_ref.space,_ref$dividers=_ref.dividers,dividers=void 0!==_ref$dividers&&_ref$dividers,children=_ref.children,className=_ref.className,props=stack_objectWithoutProperties(_ref,["component","space","dividers","children","className"]);return react.createElement(box.a,stack_extends({component:component,className:[className,Object(responsive_props.a)(stack_module_default.a,"space",space)],ref:ref},props),dividers?react.Children.map(react_keyed_flatten_children_default()(children),(function(child,index){return index>0?react.createElement(react.Fragment,null,react.createElement(Divider,{weight:"string"==typeof dividers?dividers:void 0}),child):child})):children)}))},487:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(270),__webpack_require__(1465),__webpack_require__(475),__webpack_require__(152),__webpack_require__(961),__webpack_require__(1491),__webpack_require__(2801),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var globalTranslateKey=function globalTranslateKey(key){return key};function translateKeyMac(key){switch(key.toLowerCase()){case"cmd":case"mod":return"⌘";case"control":case"ctrl":return"⌃";case"alt":return"⌥";case"shift":return"⇧";case"space":return"␣";default:return key}}function KeyboardShortcut(_ref){var children=_ref.children,className=_ref.className,_ref$translateKey=_ref.translateKey,translateKey=void 0===_ref$translateKey?globalTranslateKey:_ref$translateKey,_ref$isMac=_ref.isMac,isMac=void 0===_ref$isMac?null!=navigator.platform&&navigator.platform.toUpperCase().includes("MAC"):_ref$isMac,props=_objectWithoutProperties(_ref,["children","className","translateKey","isMac"]),shortcuts="string"==typeof children?[children]:children;return react.createElement("span",_extends({className:classnames_default()("reactist_keyboard_shortcut",className,{"reactist_keyboard_shortcut--macos":isMac})},props),shortcuts.map((function(shortcut,i){return react.createElement(react.Fragment,{key:i},0===i?null:", ",react.createElement("kbd",null,function parseKeys(shortcut,isMac,translateKey){var t=isMac?translateKeyMac:translateKey,_hasModifiers=function hasModifiers(str){return/\b(mod|cmd|ctrl|control|alt|shift)\b/i.test(str)}(shortcut);return isMac||(shortcut=shortcut.replace(/\b(mod|cmd)\b/i,"ctrl")),shortcut.split(/\s*\+\s*/).map((function mapIndividualKey(str){return function isSpecialKey(str){return/^(mod|cmd|ctrl|control|alt|shift|space)$/i.test(str)}(str)?function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1).toLowerCase()}(t(str)):_hasModifiers&&1===str.length?str.toUpperCase():str}))}(shortcut,isMac,translateKey).map((function(key,j){return react.createElement("kbd",{key:j},key)}))))})))}KeyboardShortcut.setTranslateKey=function(tr){globalTranslateKey=tr},KeyboardShortcut.displayName="KeyboardShortcut";try{KeyboardShortcut.displayName="KeyboardShortcut",KeyboardShortcut.__docgenInfo={description:"",displayName:"KeyboardShortcut",props:{children:{defaultValue:null,description:"The shortcut to be represented as markup. It supports an intuitive syntax where you can\ncombine modifiers (cmd, ctrl, shift, alt) with single keys all concatenated with plus signs.\nYou can also pass various shortcuts as an array, which will be depicted separated by commas.",name:"children",required:!0,type:{name:"string | string[]"}},translateKey:{defaultValue:null,description:"A function that allows you to change how some key names are represented. This may be useful,\nfor instance, to translate modifier names that are expressed differently in other languages\n(e.g. `Ctrl` is named `Strg` in German).\n\nIt defaults to a global version that leaves the key as is. You can pass your version as a\nprop, or you can also set your own version of this global default one, so you don't need to\npass your own on each invocation of this component.\n\n```js\nimport { KeyboardShortcut } from '@doist/reactist'\nKeyboardShortcut.setTranslateKey = key => { ... }\n```\n\nNote: When the component detects the macOS operating system it bypasses key translation for\nmost modifiers and uses macOS-specific symbols. See the `isMac` prop for details.",name:"translateKey",required:!1,type:{name:"((key: string) => string) | undefined"}},isMac:{defaultValue:{value:"navigator.platform != null && navigator.platform.toUpperCase().includes('MAC')"},description:"This prop is not meant to be passed. The component will automatically initialize it to `true`\nif it detects that the current browser / operating system is on macOS, in which case modifier\nkeys are represented using macOS' notation (e.g. ⌘ ⌃ ⌥ ⇧).\n\nThough it is discouraged, if you don't want this special treatment in macOS, you can pass\n`isMac={false}` in all invocations of this component.",name:"isMac",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/keyboard-shortcut/keyboard-shortcut.tsx#KeyboardShortcut"]={docgenInfo:KeyboardShortcut.__docgenInfo,name:"KeyboardShortcut",path:"src/components/keyboard-shortcut/keyboard-shortcut.tsx#KeyboardShortcut"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=KeyboardShortcut},5:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"f",(function(){return select})),__webpack_require__.d(__webpack_exports__,"i",(function(){return selectWithNone})),__webpack_require__.d(__webpack_exports__,"h",(function(){return selectSize})),__webpack_require__.d(__webpack_exports__,"g",(function(){return selectCount})),__webpack_require__.d(__webpack_exports__,"j",(function(){return times})),__webpack_require__.d(__webpack_exports__,"e",(function(){return reusableBoxProps})),__webpack_require__.d(__webpack_exports__,"d",(function(){return disableResponsiveProps})),__webpack_require__.d(__webpack_exports__,"c",(function(){return Wrapper})),__webpack_require__.d(__webpack_exports__,"b",(function(){return ResponsiveWidthRef})),__webpack_require__.d(__webpack_exports__,"a",(function(){return Placeholder}));__webpack_require__(473),__webpack_require__(152),__webpack_require__(1454),__webpack_require__(17),__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(313),__webpack_require__(270),__webpack_require__(244),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__(0),_box__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__(144),_heading__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__(30),_stack__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__(41);__webpack_require__(2620);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==arguments[1]?arguments[1]:"none";return{control:{type:"select"},options:["none"].concat(_toConsumableArray(options)),defaultValue:defaultValue,mapping:{none:void 0}}}function selectSize(){var defaultValue=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"none";return selectWithNone(["xsmall","small","medium","large","xlarge","xxlarge"],defaultValue)}function selectCount(label){var defaultValue=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;return{control:{type:"number",min:1},name:label,defaultValue:defaultValue}}function times(count){return Array.apply(null,Array(count)).map((function(_x,i){return i}))}function reusableBoxProps(){return{maxWidth:selectWithNone(["xsmall","small","medium","large","xlarge"]),padding:selectSize(),paddingX:selectSize(),paddingY:selectSize(),paddingTop:selectSize(),paddingRight:selectSize(),paddingBottom:selectSize(),paddingLeft:selectSize()}}var disableResponsiveProps=Object.keys(reusableBoxProps()).reduce((function(accumulator,key){return _objectSpread(_objectSpread({},accumulator),{},_defineProperty({},key,{control:!1}))}),{});function Wrapper(_ref){var title=_ref.title,children=_ref.children,_ref$border=_ref.border,border=void 0!==_ref$border&&_ref$border;return react__WEBPACK_IMPORTED_MODULE_22__.createElement(_stack__WEBPACK_IMPORTED_MODULE_25__.a,{space:"small"},title?react__WEBPACK_IMPORTED_MODULE_22__.createElement(_heading__WEBPACK_IMPORTED_MODULE_24__.a,{level:"2"},title):null,react__WEBPACK_IMPORTED_MODULE_22__.createElement(_box__WEBPACK_IMPORTED_MODULE_23__.a,{style:border?{border:"1px dotted black"}:void 0},children))}function ResponsiveWidthRef(){return react__WEBPACK_IMPORTED_MODULE_22__.createElement(react__WEBPACK_IMPORTED_MODULE_22__.Fragment,null,react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{height:"36px"}}),react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{position:"fixed",top:0,left:0}},react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{width:"992px",height:"20px",backgroundColor:"#ccc"}},"desktop min width"),react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{width:"768px",height:"20px",backgroundColor:"#ddd"}},"tablet min width")))}function Placeholder(_ref2){var label=_ref2.label,_ref2$width=_ref2.width,width=void 0===_ref2$width?"100%":_ref2$width,_ref2$height=_ref2.height,height=void 0===_ref2$height?"30px":_ref2$height;return react__WEBPACK_IMPORTED_MODULE_22__.createElement(_box__WEBPACK_IMPORTED_MODULE_23__.a,{style:{backgroundColor:"lightgreen",border:"1px solid green",width:width,height:height},display:"flex",alignItems:"center",padding:"medium"},label)}Wrapper.displayName="Wrapper",Placeholder.displayName="Placeholder";try{selectSize.displayName="selectSize",selectSize.__docgenInfo={description:"",displayName:"selectSize",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#selectSize"]={docgenInfo:selectSize.__docgenInfo,name:"selectSize",path:"src/new-components/storybook-helper.tsx#selectSize"})}catch(__react_docgen_typescript_loader_error){}try{times.displayName="times",times.__docgenInfo={description:"",displayName:"times",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#times"]={docgenInfo:times.__docgenInfo,name:"times",path:"src/new-components/storybook-helper.tsx#times"})}catch(__react_docgen_typescript_loader_error){}try{Wrapper.displayName="Wrapper",Wrapper.__docgenInfo={description:"",displayName:"Wrapper",props:{title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"ReactNode"}},border:{defaultValue:{value:"false"},description:"",name:"border",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#Wrapper"]={docgenInfo:Wrapper.__docgenInfo,name:"Wrapper",path:"src/new-components/storybook-helper.tsx#Wrapper"})}catch(__react_docgen_typescript_loader_error){}try{Placeholder.displayName="Placeholder",Placeholder.__docgenInfo={description:"",displayName:"Placeholder",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#Placeholder"]={docgenInfo:Placeholder.__docgenInfo,name:"Placeholder",path:"src/new-components/storybook-helper.tsx#Placeholder"})}catch(__react_docgen_typescript_loader_error){}},68:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2608);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},687:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2629);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},8:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Column})),__webpack_require__.d(__webpack_exports__,"b",(function(){return Columns}));__webpack_require__(1465),__webpack_require__(475),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(0),_type_helpers__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(188),_responsive_props__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(21),_box__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(144),_columns_module_css__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(687),_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(_columns_module_css__WEBPACK_IMPORTED_MODULE_10__);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Column=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_7__.a)((function Column(_ref,ref){_ref.component;var _ref$width=_ref.width,width=void 0===_ref$width?"auto":_ref$width,children=_ref.children,props=_objectWithoutProperties(_ref,["component","width","children"]);return react__WEBPACK_IMPORTED_MODULE_6__.createElement(_box__WEBPACK_IMPORTED_MODULE_9__.a,_extends({className:[_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a.column,"content"!==width?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.a)(_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a,"columnWidth",width.replace("/","-")):null],minWidth:0,width:"content"!==width?"full":void 0,flexShrink:"content"===width?0:void 0,ref:ref},props),children)})),Columns=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_7__.a)((function Columns(_ref2,ref){var space=_ref2.space,align=_ref2.align,alignY=_ref2.alignY,collapseBelow=_ref2.collapseBelow,children=_ref2.children,props=_objectWithoutProperties(_ref2,["space","align","alignY","collapseBelow","children"]);return react__WEBPACK_IMPORTED_MODULE_6__.createElement(_box__WEBPACK_IMPORTED_MODULE_9__.a,_extends({},props,{className:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.a)(_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a,"space",space),flexDirection:"desktop"===collapseBelow?["column","column","row"]:"tablet"===collapseBelow?["column","row"]:"row",display:"flex",alignItems:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.b)(alignY,(function(alignY){return"top"===alignY?"flexStart":"bottom"===alignY?"flexEnd":"center"})),justifyContent:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.b)(align,(function(align){return"left"===align?"flexStart":"right"===align?"flexEnd":"center"})),flexGrow:1,ref:ref}),children)}))},986:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2623);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}}},[[1598,2,3]]]); \ No newline at end of file diff --git a/docs/main.364064a5.iframe.bundle.js b/docs/main.364064a5.iframe.bundle.js new file mode 100644 index 000000000..e337c58cd --- /dev/null +++ b/docs/main.364064a5.iframe.bundle.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{115:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(656),__webpack_require__(24),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_dom=__webpack_require__(51),react_dom_default=__webpack_require__.n(react_dom),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),components_button=__webpack_require__(16);__webpack_require__(2785);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _defineProperties(target,props){for(var i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Box=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_12__.a)((function Box(_ref,ref){var _ref2,_ref3,_ref4,_ref5,_ref$component=_ref.component,component=void 0===_ref$component?"div":_ref$component,_ref$position=_ref.position,position=void 0===_ref$position?"static":_ref$position,_ref$display=_ref.display,display=void 0===_ref$display?"block":_ref$display,_ref$flexDirection=_ref.flexDirection,flexDirection=void 0===_ref$flexDirection?"row":_ref$flexDirection,flexWrap=_ref.flexWrap,flexGrow=_ref.flexGrow,flexShrink=_ref.flexShrink,alignItems=_ref.alignItems,justifyContent=_ref.justifyContent,overflow=_ref.overflow,width=_ref.width,height=_ref.height,background=_ref.background,border=_ref.border,borderRadius=_ref.borderRadius,minWidth=_ref.minWidth,maxWidth=_ref.maxWidth,padding=_ref.padding,paddingY=_ref.paddingY,paddingX=_ref.paddingX,paddingTop=_ref.paddingTop,paddingRight=_ref.paddingRight,paddingBottom=_ref.paddingBottom,paddingLeft=_ref.paddingLeft,className=_ref.className,children=_ref.children,props=_objectWithoutProperties(_ref,["component","position","display","flexDirection","flexWrap","flexGrow","flexShrink","alignItems","justifyContent","overflow","width","height","background","border","borderRadius","minWidth","maxWidth","padding","paddingY","paddingX","paddingTop","paddingRight","paddingBottom","paddingLeft","className","children"]),resolvedPaddingTop=null!==(_ref2=null!=paddingTop?paddingTop:paddingY)&&void 0!==_ref2?_ref2:padding,resolvedPaddingRight=null!==(_ref3=null!=paddingRight?paddingRight:paddingX)&&void 0!==_ref3?_ref3:padding,resolvedPaddingBottom=null!==(_ref4=null!=paddingBottom?paddingBottom:paddingY)&&void 0!==_ref4?_ref4:padding,resolvedPaddingLeft=null!==(_ref5=null!=paddingLeft?paddingLeft:paddingX)&&void 0!==_ref5?_ref5:padding,isFlex="flex"===display||"inlineFlex"===display;return react__WEBPACK_IMPORTED_MODULE_10__.createElement(component,_objectSpread(_objectSpread({},props),{},{className:classnames__WEBPACK_IMPORTED_MODULE_11___default()(className,_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a.box,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"display",display),"static"!==position?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"position",position):null,null!=minWidth?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"minWidth",String(minWidth)):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"maxWidth",maxWidth),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingTop",resolvedPaddingTop),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingRight",resolvedPaddingRight),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingBottom",resolvedPaddingBottom),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"paddingLeft",resolvedPaddingLeft),isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexDirection",flexDirection):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexWrap",flexWrap):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"alignItems",alignItems):null,isFlex?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"justifyContent",justifyContent):null,null!=flexShrink?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexShrink",String(flexShrink)):null,null!=flexGrow?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"flexGrow",String(flexGrow)):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"overflow",overflow),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"width",width),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"height",height),Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"bg",background),"none"!==borderRadius?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"borderRadius",borderRadius):null,"none"!==border?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_13__.a)(_box_module_css__WEBPACK_IMPORTED_MODULE_14___default.a,"border",border):null)||void 0,ref:ref}),children)}))},1562:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2622);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1563:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2631);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},1598:function(module,exports,__webpack_require__){__webpack_require__(1599),__webpack_require__(1858),__webpack_require__(1859),__webpack_require__(2888),__webpack_require__(2887),__webpack_require__(2892),module.exports=__webpack_require__(2604)},16:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),tooltip_tooltip=__webpack_require__(2907);__webpack_require__(2773);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var button_Button=react_default.a.forwardRef((function Button(_ref,ref){var _ref$type=_ref.type,type=void 0===_ref$type?"button":_ref$type,variant=_ref.variant,_ref$size=_ref.size,size=void 0===_ref$size?"default":_ref$size,_ref$loading=_ref.loading,loading=void 0!==_ref$loading&&_ref$loading,_ref$disabled=_ref.disabled,disabled=void 0!==_ref$disabled&&_ref$disabled,tooltip=_ref.tooltip,onClick=_ref.onClick,children=_ref.children,props=_objectWithoutProperties(_ref,["type","variant","size","loading","disabled","tooltip","onClick","children"]),className=classnames_default()("reactist_button",variant?"reactist_button--".concat(variant):null,"default"!==size?"reactist_button--".concat(size):null,{"reactist_button--loading":loading},props.className),button=react_default.a.createElement("button",_extends({},props,{ref:ref,type:type,className:className,"aria-disabled":disabled||loading,onClick:disabled||loading?void 0:onClick}),children);return tooltip?react_default.a.createElement(tooltip_tooltip.a,{content:tooltip},button):button}));button_Button.displayName="Button",button_Button.defaultProps={size:"default",loading:!1,disabled:!1};try{button_Button.displayName="Button",button_Button.__docgenInfo={description:"",displayName:"Button",props:{loading:{defaultValue:{value:"false"},description:"Loading style. When true it disables the button, but it also adds a visual indication of\nsome in-progress operation going on.",name:"loading",required:!1,type:{name:"boolean | undefined"}},variant:{defaultValue:null,description:"Controls visually how the button shows up from a predefined set of kinds of buttons.",name:"variant",required:!1,type:{name:'"primary" | "secondary" | "danger" | "link" | undefined'}},size:{defaultValue:{value:"default"},description:"The size of the button. If not provided it shows up in a normal size.",name:"size",required:!1,type:{name:'"default" | "small" | "large" | undefined'}},tooltip:{defaultValue:null,description:"Tooltip that is displayed on hover.\n\nThis replaces `title` which is not supported for these buttons to avoid confusion.",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/button/button.tsx#Button"]={docgenInfo:button_Button.__docgenInfo,name:"Button",path:"src/components/button/button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=button_Button},1700:function(module,exports){},1782:function(module,exports){},1859:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(1062)},188:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return forwardRefWithAs}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0);function forwardRefWithAs(render){return react__WEBPACK_IMPORTED_MODULE_0__.forwardRef(render)}try{forwardRefWithAs.displayName="forwardRefWithAs",forwardRefWithAs.__docgenInfo={description:"",displayName:"forwardRefWithAs",props:{displayName:{defaultValue:null,description:"",name:"displayName",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/type-helpers.tsx#forwardRefWithAs"]={docgenInfo:forwardRefWithAs.__docgenInfo,name:"forwardRefWithAs",path:"src/new-components/type-helpers.tsx#forwardRefWithAs"})}catch(__react_docgen_typescript_loader_error){}},1916:function(module,exports){},21:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return getClassNames})),__webpack_require__.d(__webpack_exports__,"b",(function(){return mapResponsiveProp}));__webpack_require__(473),__webpack_require__(152),__webpack_require__(2609),__webpack_require__(269);var prefix=["","tablet-","desktop-"];function getClassNames(styles,property,value){if(!value)return null;var classList="string"==typeof value?[styles["".concat(property,"-").concat(value)]]:value.map((function(s,i){return styles["".concat(prefix[i]).concat(property,"-").concat(s)]}));return classList}function mapResponsiveProp(fromValue,mapper){return"string"==typeof fromValue||"number"==typeof fromValue||"boolean"==typeof fromValue?mapper(fromValue):Array.isArray(fromValue)?fromValue.map(mapper):void 0}},251:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(244),__webpack_require__(1491);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(961),__webpack_require__(475),__webpack_require__(2694);function getInitials(name){if(!name)return"";var seed=name.trim().split(" "),firstInitial=seed[0],lastInitial=seed[seed.length-1],initials=firstInitial[0];return firstInitial[0]!==lastInitial[0]&&(initials+=lastInitial[0]),initials.toUpperCase()}__webpack_require__(2691);var AVATAR_COLORS=["#fcc652","#e9952c","#e16b2d","#d84b40","#e8435a","#e5198a","#ad3889","#86389c","#a8a8a8","#98be2f","#5d9d50","#5f9f85","#5bbcb6","#32a3bf","#2bafeb","#2d88c3","#3863cc","#5e5e5e"],AVATAR_SIZES=["xxs","xs","s","m","l","xl","xxl","xxxl"];function Avatar(_ref){var email,maxIndex,seed,user=_ref.user,avatarUrl=_ref.avatarUrl,_ref$size=_ref.size,size=void 0===_ref$size?"l":_ref$size,className=_ref.className,_ref$colorList=_ref.colorList,colorList=void 0===_ref$colorList?AVATAR_COLORS:_ref$colorList,userInitials=getInitials(user.name)||getInitials(user.email),avatarSize=size&&AVATAR_SIZES.includes(size)?size:"l",avatarClass=classnames_default()("reactist_avatar reactist_avatar_size--".concat(avatarSize),className),style=avatarUrl?{backgroundImage:"url(".concat(avatarUrl,")"),textIndent:"-9999px"}:{backgroundColor:colorList[(email=user.email,maxIndex=colorList.length,seed=email.split("@")[0],(seed.charCodeAt(0)+seed.charCodeAt(seed.length-1)||0)%maxIndex)]};return react_default.a.createElement("div",{className:avatarClass,style:style},userInitials)}Avatar.displayName="Avatar",Avatar.displayName="Avatar";try{Avatar.displayName="Avatar",Avatar.__docgenInfo={description:"",displayName:"Avatar",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}},colorList:{defaultValue:null,description:"",name:"colorList",required:!1,type:{name:"string[] | undefined"}},size:{defaultValue:{value:"l"},description:"",name:"size",required:!1,type:{name:'"l" | "xxs" | "xs" | "s" | "m" | "xl" | "xxl" | "xxxl" | undefined'}},avatarUrl:{defaultValue:null,description:"",name:"avatarUrl",required:!1,type:{name:"string | undefined"}},user:{defaultValue:null,description:"",name:"user",required:!0,type:{name:"{ name?: string | undefined; email: string; }"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/avatar/avatar.tsx#Avatar"]={docgenInfo:Avatar.__docgenInfo,name:"Avatar",path:"src/components/avatar/avatar.tsx#Avatar"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=Avatar},2601:function(module,exports,__webpack_require__){var content=__webpack_require__(2602);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2602:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story {\n margin: 0 40px 0 40px;\n padding: 20px;\n background-color: white;\n}\n","",{version:3,sources:["webpack://stories/components/styles/story.less"],names:[],mappings:"AAAA;EACI,qBAAA;EACA,aAAA;EACA,uBAAA;AACJ",sourcesContent:[".story {\n margin: 0 40px 0 40px;\n padding: 20px;\n background-color: white;\n\n // checkered background\n // @gray: whitesmoke;\n // background-image: linear-gradient(45deg, @gray 25%, transparent 25%), linear-gradient(-45deg, @gray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, @gray 75%), linear-gradient(-45deg, transparent 75%, @gray 75%);\n // background-size: 20px 20px;\n // background-position: 0 0, 0 10px, 10px -10px, -10px 0px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2604:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(1062).configure)([__webpack_require__(2605),__webpack_require__(2634)],module,!1)}).call(this,__webpack_require__(264)(module))},2605:function(module,exports,__webpack_require__){var map={"./new-components/box/box.stories.tsx":2606,"./new-components/columns/columns.stories.tsx":2626,"./new-components/heading/heading.stories.tsx":2630,"./new-components/inline/inline.stories.tsx":2902,"./new-components/stack/stack.stories.tsx":2632,"./new-components/text/text.stories.tsx":2903};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=2605},2606:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(5),_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_box__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(144);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i) {\n return (\n \n \n
One
\n
Two
\n
Three
\n \n \n )\n}"}},InteractivePropsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:'function ResponsiveStory() {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n
One
\n
Two
\n
Three
\n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},ResponsiveStory.parameters);try{InteractivePropsStory.displayName="InteractivePropsStory",InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{position:{defaultValue:null,description:"",name:"position",required:!1,type:{name:'"absolute" | "fixed" | "relative" | "static" | "sticky" | readonly [BoxPosition, BoxPosition] | readonly [BoxPosition, BoxPosition, BoxPosition] | undefined'}},display:{defaultValue:null,description:"",name:"display",required:!1,type:{name:'"none" | "block" | "flex" | "inline" | "inlineBlock" | "inlineFlex" | readonly [BoxDisplay, BoxDisplay] | readonly [BoxDisplay, BoxDisplay, BoxDisplay] | undefined'}},flexDirection:{defaultValue:null,description:"",name:"flexDirection",required:!1,type:{name:'"column" | "row" | readonly [BoxFlexDirection, BoxFlexDirection] | readonly [BoxFlexDirection, BoxFlexDirection, BoxFlexDirection] | undefined'}},flexWrap:{defaultValue:null,description:"",name:"flexWrap",required:!1,type:{name:'"nowrap" | "wrap" | undefined'}},flexGrow:{defaultValue:null,description:"",name:"flexGrow",required:!1,type:{name:"0 | 1 | undefined"}},flexShrink:{defaultValue:null,description:"",name:"flexShrink",required:!1,type:{name:"0 | undefined"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:'"center" | "flexEnd" | "flexStart" | readonly [BoxAlignItems, BoxAlignItems] | readonly [BoxAlignItems, BoxAlignItems, BoxAlignItems] | undefined'}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:'"center" | "flexEnd" | "flexStart" | "spaceBetween" | readonly [BoxJustifyContent, BoxJustifyContent] | readonly [BoxJustifyContent, BoxJustifyContent, BoxJustifyContent] | undefined'}},overflow:{defaultValue:null,description:"",name:"overflow",required:!1,type:{name:'"hidden" | "visible" | "auto" | "scroll" | undefined'}},width:{defaultValue:null,description:"",name:"width",required:!1,type:{name:'"full" | undefined'}},height:{defaultValue:null,description:"",name:"height",required:!1,type:{name:'"full" | undefined'}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"ClassValue"}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/box/box.stories.tsx#InteractivePropsStory"]={docgenInfo:InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/box/box.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}},2608:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._34n6lzh1{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent}._4O18_OS-{position:absolute}._28SfqXxQ{position:fixed}._25hgucpJ{position:relative}._1z9gRRgL{position:-webkit-sticky;position:sticky}@media (min-width:768px){._165GB3d9{position:absolute}._35BfHjzS{position:fixed}.ToWL2vUd{position:relative}._3Y7tS7ZB{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._1cIKCESH{position:absolute}._2UnmU33s{position:fixed}.Yvv9o15g{position:relative}._1ulmDxJK{position:-webkit-sticky;position:sticky}}._3metZFs3{display:block}.OtqwlC-g{display:flex}.ScnLRsqQ{display:inline}._3p4d3SOr{display:inline-block}._3Wbf3h8F{display:inline-flex}.vZcMBze5{display:none}@media (min-width:768px){.xnym6zKT{display:block}._3lk6GIUC{display:flex}._2lsDHRFI{display:inline}._3_tat_7q{display:inline-block}._2zp0Ysn_{display:inline-flex}._22HipJxo{display:none}}@media (min-width:992px){.egzVdgM-{display:block}._3O-rsskG{display:flex}._2e2_Bdle{display:inline}._1BndqY98{display:inline-block}._3lKbMoNn{display:inline-flex}._2-eAy5iF{display:none}}._1LICbbGA{min-width:0}._11C3KbpS{min-width:220px}._2i8CQCsg{min-width:400px}._2mvYxIBO{min-width:660px}.tUeYcld-{max-width:940px}._3xFf8yMo{min-width:1280px}._1kI7x4VB{max-width:220px}.eLup45J2{max-width:400px}._3Q3oh0wq{max-width:660px}._1m4kNCjr{max-width:940px}.rKzeZFfP{max-width:1280px}._1cIxSJgN{flex-direction:column}._3d82rg2O{flex-direction:row}@media (min-width:768px){._2BCIaaSu{flex-direction:column}._1KZ73hzW{flex-direction:row}}@media (min-width:992px){.AlBpSaFt{flex-direction:column}.szQspntj{flex-direction:row}}._2R_eNJAR{flex-wrap:wrap}._1A8QKWzr{flex-wrap:nowrap}._1BY1l_eA{flex-shrink:0}._2JTESmuO{flex-grow:0}._1IIXp_yM{flex-grow:1}._3Aw6MW6G{align-items:flex-start}._3J7hgDFf{align-items:center}._1PQDcZy6{align-items:flex-end}@media (min-width:768px){._3166iR2s{align-items:flex-start}.QCePjapg{align-items:center}.jjkOQC8r{align-items:flex-end}}@media (min-width:992px){.A0DebJu_{align-items:flex-start}._1isnu434{align-items:center}._3VslwRNK{align-items:flex-end}}._2pEU8SQC{justify-content:flex-start}._1mRUNYls{justify-content:center}._3EDR-URW{justify-content:flex-end}.IXOituOK{justify-content:space-between}@media (min-width:768px){._2d7kRHd7{justify-content:flex-start}._1UzfR6Vf{justify-content:center}._2ImQNbDg{justify-content:flex-end}._16UkMMI6{justify-content:space-between}}@media (min-width:992px){._3cyvD1f5{justify-content:flex-start}._1HcMvcsu{justify-content:center}._33m1Ctuk{justify-content:flex-end}._2bJ7PwH5{justify-content:space-between}}._2VHbvrHg{overflow:hidden}.C08q82uW{overflow:auto}._3jPsBi7a{overflow:visible}._36PWUusV{overflow:scroll}._32U3_pi2{width:100%}._1AR6jtYl{height:100%}._1fcm9eDc{padding-top:var(--reactist-spacing-xsmall)}._2lkiKEWt{padding-top:var(--reactist-spacing-small)}._119wY5KY{padding-top:var(--reactist-spacing-medium)}._2lLLEoa3{padding-top:var(--reactist-spacing-large)}._3MKPysMl{padding-top:var(--reactist-spacing-xlarge)}._2BRtAsyi{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1fWU3n1u{padding-top:var(--reactist-spacing-xsmall)}._3GjsUaeE{padding-top:var(--reactist-spacing-small)}._21yTqsvb{padding-top:var(--reactist-spacing-medium)}._3Qau3vLp{padding-top:var(--reactist-spacing-large)}._3HTGDpML{padding-top:var(--reactist-spacing-xlarge)}._13Qaddpr{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._16jrLfRP{padding-top:var(--reactist-spacing-xsmall)}.Idw94aP3{padding-top:var(--reactist-spacing-small)}._1R8pIf5u{padding-top:var(--reactist-spacing-medium)}._1KblKWWz{padding-top:var(--reactist-spacing-large)}._1Argcyq5{padding-top:var(--reactist-spacing-xlarge)}._3m1DpHzr{padding-top:var(--reactist-spacing-xxlarge)}}._2qsODlQ1{padding-right:var(--reactist-spacing-xsmall)}.J6fFv8Uw{padding-right:var(--reactist-spacing-small)}._3B9cvkFr{padding-right:var(--reactist-spacing-medium)}._31dJKVeK{padding-right:var(--reactist-spacing-large)}.MN3kdPGA{padding-right:var(--reactist-spacing-xlarge)}.hOdAx-DJ{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1zfH8gJo{padding-right:var(--reactist-spacing-xsmall)}.ntzZ3X_i{padding-right:var(--reactist-spacing-small)}._2YK4VfjY{padding-right:var(--reactist-spacing-medium)}.l_EnRFEp{padding-right:var(--reactist-spacing-large)}.ZDEFhvKH{padding-right:var(--reactist-spacing-xlarge)}._2xMDWQvF{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._2SKtOj1H{padding-right:var(--reactist-spacing-xsmall)}._1JFBzLmS{padding-right:var(--reactist-spacing-small)}._1d8OeBwG{padding-right:var(--reactist-spacing-medium)}._1oqWSRHW{padding-right:var(--reactist-spacing-large)}._3hs_npgm{padding-right:var(--reactist-spacing-xlarge)}._2rUd8spK{padding-right:var(--reactist-spacing-xxlarge)}}.QAjpz88e{padding-bottom:var(--reactist-spacing-xsmall)}._27gXF8UK{padding-bottom:var(--reactist-spacing-small)}._1burbc7g{padding-bottom:var(--reactist-spacing-medium)}._1AG-1RI8{padding-bottom:var(--reactist-spacing-large)}._4A7BKhnw{padding-bottom:var(--reactist-spacing-xlarge)}._1zYBan2X{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1q-EYnWe{padding-bottom:var(--reactist-spacing-xsmall)}._3cdY7xQ6{padding-bottom:var(--reactist-spacing-small)}._8ttAhsAQ{padding-bottom:var(--reactist-spacing-medium)}._3o9VZU0a{padding-bottom:var(--reactist-spacing-large)}._31_a_F3n{padding-bottom:var(--reactist-spacing-xlarge)}._2blD9ia6{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._18jTpIXx{padding-bottom:var(--reactist-spacing-xsmall)}.GGgw4UeY{padding-bottom:var(--reactist-spacing-small)}.u8YQor1g{padding-bottom:var(--reactist-spacing-medium)}._1EO13Ldk{padding-bottom:var(--reactist-spacing-large)}.e1feW_Dq{padding-bottom:var(--reactist-spacing-xlarge)}._2nZlnStA{padding-bottom:var(--reactist-spacing-xxlarge)}}._2XOJ9rB5{padding-left:var(--reactist-spacing-xsmall)}._2CeIk2Gc{padding-left:var(--reactist-spacing-small)}._3pHpOf1P{padding-left:var(--reactist-spacing-medium)}._2zWUeqgY{padding-left:var(--reactist-spacing-large)}._3qO66J6_{padding-left:var(--reactist-spacing-xlarge)}._3SwRIaXO{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1ksF6GVY{padding-left:var(--reactist-spacing-xsmall)}._1JYdaVH-{padding-left:var(--reactist-spacing-small)}._1Fi5Oqez{padding-left:var(--reactist-spacing-medium)}._1on5T6VJ{padding-left:var(--reactist-spacing-large)}._2aNsxVAR{padding-left:var(--reactist-spacing-xlarge)}._2ieKTraX{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._39FA-zw4{padding-left:var(--reactist-spacing-xsmall)}._2VuLKwfY{padding-left:var(--reactist-spacing-small)}._13U30dEX{padding-left:var(--reactist-spacing-medium)}.NtbYWZBb{padding-left:var(--reactist-spacing-large)}._3hlXya32{padding-left:var(--reactist-spacing-xlarge)}.vVYLlu05{padding-left:var(--reactist-spacing-xxlarge)}}.acHew4QS{background-color:var(--reactist-bg-default)}._27wTWuhR{background-color:var(--reactist-bg-aside)}._13n6zG49{background-color:var(--reactist-bg-highlight)}._3xE7o7Lc{background-color:var(--reactist-bg-selected)}._1s36b_gH{border-radius:var(--reactist-border-radius-small)}._1SIaqDBP{border-radius:var(--reactist-border-radius-large)}._1-QIwmSO{border:1px solid var(--reactist-framework-border)}",""]),exports.locals={box:"_34n6lzh1","position-absolute":"_4O18_OS-","position-fixed":"_28SfqXxQ","position-relative":"_25hgucpJ","position-sticky":"_1z9gRRgL","tablet-position-absolute":"_165GB3d9","tablet-position-fixed":"_35BfHjzS","tablet-position-relative":"ToWL2vUd","tablet-position-sticky":"_3Y7tS7ZB","desktop-position-absolute":"_1cIKCESH","desktop-position-fixed":"_2UnmU33s","desktop-position-relative":"Yvv9o15g","desktop-position-sticky":"_1ulmDxJK","display-block":"_3metZFs3","display-flex":"OtqwlC-g","display-inline":"ScnLRsqQ","display-inlineBlock":"_3p4d3SOr","display-inlineFlex":"_3Wbf3h8F","display-none":"vZcMBze5","tablet-display-block":"xnym6zKT","tablet-display-flex":"_3lk6GIUC","tablet-display-inline":"_2lsDHRFI","tablet-display-inlineBlock":"_3_tat_7q","tablet-display-inlineFlex":"_2zp0Ysn_","tablet-display-none":"_22HipJxo","desktop-display-block":"egzVdgM-","desktop-display-flex":"_3O-rsskG","desktop-display-inline":"_2e2_Bdle","desktop-display-inlineBlock":"_1BndqY98","desktop-display-inlineFlex":"_3lKbMoNn","desktop-display-none":"_2-eAy5iF","minWidth-0":"_1LICbbGA","minWidth-xsmall":"_11C3KbpS","minWidth-small":"_2i8CQCsg","minWidth-medium":"_2mvYxIBO","minWidth-large":"tUeYcld-","minWidth-xlarge":"_3xFf8yMo","maxWidth-xsmall":"_1kI7x4VB","maxWidth-small":"eLup45J2","maxWidth-medium":"_3Q3oh0wq","maxWidth-large":"_1m4kNCjr","maxWidth-xlarge":"rKzeZFfP","flexDirection-column":"_1cIxSJgN","flexDirection-row":"_3d82rg2O","tablet-flexDirection-column":"_2BCIaaSu","tablet-flexDirection-row":"_1KZ73hzW","desktop-flexDirection-column":"AlBpSaFt","desktop-flexDirection-row":"szQspntj","flexWrap-wrap":"_2R_eNJAR","flexWrap-nowrap":"_1A8QKWzr","flexShrink-0":"_1BY1l_eA","flexGrow-0":"_2JTESmuO","flexGrow-1":"_1IIXp_yM","alignItems-flexStart":"_3Aw6MW6G","alignItems-center":"_3J7hgDFf","alignItems-flexEnd":"_1PQDcZy6","tablet-alignItems-flexStart":"_3166iR2s","tablet-alignItems-center":"QCePjapg","tablet-alignItems-flexEnd":"jjkOQC8r","desktop-alignItems-flexStart":"A0DebJu_","desktop-alignItems-center":"_1isnu434","desktop-alignItems-flexEnd":"_3VslwRNK","justifyContent-flexStart":"_2pEU8SQC","justifyContent-center":"_1mRUNYls","justifyContent-flexEnd":"_3EDR-URW","justifyContent-spaceBetween":"IXOituOK","tablet-justifyContent-flexStart":"_2d7kRHd7","tablet-justifyContent-center":"_1UzfR6Vf","tablet-justifyContent-flexEnd":"_2ImQNbDg","tablet-justifyContent-spaceBetween":"_16UkMMI6","desktop-justifyContent-flexStart":"_3cyvD1f5","desktop-justifyContent-center":"_1HcMvcsu","desktop-justifyContent-flexEnd":"_33m1Ctuk","desktop-justifyContent-spaceBetween":"_2bJ7PwH5","overflow-hidden":"_2VHbvrHg","overflow-auto":"C08q82uW","overflow-visible":"_3jPsBi7a","overflow-scroll":"_36PWUusV","width-full":"_32U3_pi2","height-full":"_1AR6jtYl","paddingTop-xsmall":"_1fcm9eDc","paddingTop-small":"_2lkiKEWt","paddingTop-medium":"_119wY5KY","paddingTop-large":"_2lLLEoa3","paddingTop-xlarge":"_3MKPysMl","paddingTop-xxlarge":"_2BRtAsyi","tablet-paddingTop-xsmall":"_1fWU3n1u","tablet-paddingTop-small":"_3GjsUaeE","tablet-paddingTop-medium":"_21yTqsvb","tablet-paddingTop-large":"_3Qau3vLp","tablet-paddingTop-xlarge":"_3HTGDpML","tablet-paddingTop-xxlarge":"_13Qaddpr","desktop-paddingTop-xsmall":"_16jrLfRP","desktop-paddingTop-small":"Idw94aP3","desktop-paddingTop-medium":"_1R8pIf5u","desktop-paddingTop-large":"_1KblKWWz","desktop-paddingTop-xlarge":"_1Argcyq5","desktop-paddingTop-xxlarge":"_3m1DpHzr","paddingRight-xsmall":"_2qsODlQ1","paddingRight-small":"J6fFv8Uw","paddingRight-medium":"_3B9cvkFr","paddingRight-large":"_31dJKVeK","paddingRight-xlarge":"MN3kdPGA","paddingRight-xxlarge":"hOdAx-DJ","tablet-paddingRight-xsmall":"_1zfH8gJo","tablet-paddingRight-small":"ntzZ3X_i","tablet-paddingRight-medium":"_2YK4VfjY","tablet-paddingRight-large":"l_EnRFEp","tablet-paddingRight-xlarge":"ZDEFhvKH","tablet-paddingRight-xxlarge":"_2xMDWQvF","desktop-paddingRight-xsmall":"_2SKtOj1H","desktop-paddingRight-small":"_1JFBzLmS","desktop-paddingRight-medium":"_1d8OeBwG","desktop-paddingRight-large":"_1oqWSRHW","desktop-paddingRight-xlarge":"_3hs_npgm","desktop-paddingRight-xxlarge":"_2rUd8spK","paddingBottom-xsmall":"QAjpz88e","paddingBottom-small":"_27gXF8UK","paddingBottom-medium":"_1burbc7g","paddingBottom-large":"_1AG-1RI8","paddingBottom-xlarge":"_4A7BKhnw","paddingBottom-xxlarge":"_1zYBan2X","tablet-paddingBottom-xsmall":"_1q-EYnWe","tablet-paddingBottom-small":"_3cdY7xQ6","tablet-paddingBottom-medium":"_8ttAhsAQ","tablet-paddingBottom-large":"_3o9VZU0a","tablet-paddingBottom-xlarge":"_31_a_F3n","tablet-paddingBottom-xxlarge":"_2blD9ia6","desktop-paddingBottom-xsmall":"_18jTpIXx","desktop-paddingBottom-small":"GGgw4UeY","desktop-paddingBottom-medium":"u8YQor1g","desktop-paddingBottom-large":"_1EO13Ldk","desktop-paddingBottom-xlarge":"e1feW_Dq","desktop-paddingBottom-xxlarge":"_2nZlnStA","paddingLeft-xsmall":"_2XOJ9rB5","paddingLeft-small":"_2CeIk2Gc","paddingLeft-medium":"_3pHpOf1P","paddingLeft-large":"_2zWUeqgY","paddingLeft-xlarge":"_3qO66J6_","paddingLeft-xxlarge":"_3SwRIaXO","tablet-paddingLeft-xsmall":"_1ksF6GVY","tablet-paddingLeft-small":"_1JYdaVH-","tablet-paddingLeft-medium":"_1Fi5Oqez","tablet-paddingLeft-large":"_1on5T6VJ","tablet-paddingLeft-xlarge":"_2aNsxVAR","tablet-paddingLeft-xxlarge":"_2ieKTraX","desktop-paddingLeft-xsmall":"_39FA-zw4","desktop-paddingLeft-small":"_2VuLKwfY","desktop-paddingLeft-medium":"_13U30dEX","desktop-paddingLeft-large":"NtbYWZBb","desktop-paddingLeft-xlarge":"_3hlXya32","desktop-paddingLeft-xxlarge":"vVYLlu05","bg-default":"acHew4QS","bg-aside":"_27wTWuhR","bg-highlight":"_13n6zG49","bg-selected":"_3xE7o7Lc","borderRadius-standard":"_1s36b_gH","borderRadius-full":"_1SIaqDBP","border-standard":"_1-QIwmSO"},module.exports=exports},2620:function(module,exports,__webpack_require__){var content=__webpack_require__(2621);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2621:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,":root {\n /*\n * breakpoints\n *\n * Unfortunately CSS custom properties are not available in media queries. So these are not\n * being used right now (although all uses of the hardcoded value are annotated with the names.\n *\n * We could manage these as pre-processor variables, but that would leave the question about how\n * is going to be possible to customize these values from consumer apps.\n *\n * See https://stackoverflow.com/q/40722882/621809\n * Possible solution: https://www.npmjs.com/package/postcss-media-variables\n */\n --reactist-breakpoint-tablet: 768px;\n --reactist-breakpoint-desktop: 992px;\n /* spacing sizes */\n --reactist-spacing-xsmall: 4px;\n --reactist-spacing-small: 8px;\n --reactist-spacing-medium: 12px;\n --reactist-spacing-large: 16px;\n --reactist-spacing-xlarge: 24px;\n --reactist-spacing-xxlarge: 32px;\n /* font sizes */\n --reactist-font-size-caption: 12px;\n --reactist-font-size-copy: 13px;\n --reactist-font-size-body: 14px;\n --reactist-font-size-subtitle: 16px;\n --reactist-font-size-header: 20px;\n --reactist-font-size-header-large: 24px;\n --reactist-font-size-header-xlarge: 32px;\n /* font weight */\n --reactist-font-weight-regular: 400;\n --reactist-font-weight-medium: 500;\n --reactist-font-weight-strong: 700;\n /* border and separator colors */\n --reactist-framework-separator: #e6e6e6;\n --reactist-framework-border: #d6d6d6;\n --reactist-framework-border-focus: rgba(0, 0, 0, 0.4);\n --reactist-framework-border-alpha: rgba(0, 0, 0, 0.15);\n /* border-radius */\n --reactist-border-radius-small: 5px;\n --reactist-border-radius-large: 10px;\n /* background color */\n --reactist-bg-default: #ffffff;\n --reactist-bg-brand: #d1453b;\n --reactist-bg-aside: #fafafa;\n --reactist-bg-highlight: #f2f2f2;\n --reactist-bg-selected: #e6e6e6;\n /* colors */\n --reactist-framework-fill-accent: #e0edff;\n --reactist-framework-fill-aside: #fafafa;\n --reactist-framework-fill-background: #fafafa;\n --reactist-framework-fill-base: #ffffff;\n --reactist-framework-fill-crater: #f2f2f2;\n --reactist-framework-fill-crest: #e6e6e6;\n --reactist-framework-fill-elevated: #ffffff;\n --reactist-framework-fill-selected: #ececec;\n --reactist-framework-fill-highlight: #f2f2f2;\n --reactist-framework-fill-ledge: #e0e0e0;\n --reactist-framework-fill-peak: #3d3d3d;\n --reactist-framework-fill-pinnacle: #ebebeb;\n --reactist-framework-fill-ridge: #f2f2f2;\n --reactist-framework-fill-summit: #d6d6d6;\n --reactist-content-primary: rgba(0, 0, 0, 0.88);\n --reactist-content-secondary: rgba(0, 0, 0, 0.56);\n --reactist-content-tertiary: rgba(0, 0, 0, 0.4);\n --reactist-content-quaternary: rgba(0, 0, 0, 0.24);\n --reactist-content-light-on-dark: #ffffff;\n --reactist-chromatic-fill-red: #d1453b;\n --reactist-chromatic-fill-orange: #eb8d13;\n --reactist-chromatic-fill-green: #058527;\n --reactist-chromatic-fill-teal: #007e9e;\n --reactist-chromatic-fill-blue: #246fe0;\n --reactist-chromatic-fill-purple: #692fc2;\n --reactist-chromatic-fill-charcoal: #525252;\n --reactist-chromatic-fill-grey: #808080;\n --reactist-chromatic-fill-midnight: #4c5b70;\n --reactist-chromatic-content-red: #d1453b;\n --reactist-chromatic-content-orange: #eb8d13;\n --reactist-chromatic-content-green: #058527;\n --reactist-chromatic-content-green-background: rgba(5, 133, 39, 0.05);\n --reactist-chromatic-content-green-background-highlight: rgba(5, 133, 39, 0.1);\n --reactist-chromatic-content-teal: #007e9e;\n --reactist-chromatic-content-blue: #246fe0;\n --reactist-chromatic-content-purple: #692fc2;\n --reactist-chromatic-content-charcoal: #525252;\n --reactist-chromatic-content-grey: #808080;\n --reactist-chromatic-highlight-blue: #585d64;\n --reactist-chromatic-highlight-green: #d8ebdd;\n --reactist-chromatic-highlight-red: #fcf2f2;\n /* component-specific */\n --reactist-switch-checked: var(--reactist-chromatic-content-green);\n /* alerts */\n --reactist-alert-tone-info-icon: #1d438c;\n --reactist-alert-tone-info-border: var(--reactist-chromatic-content-blue);\n --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);\n --reactist-alert-tone-positive-icon: #035017;\n --reactist-alert-tone-positive-border: var(--reactist-chromatic-content-green);\n --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);\n --reactist-alert-tone-caution-icon: #5e3704;\n --reactist-alert-tone-caution-border: var(--reactist-chromatic-content-orange);\n --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);\n --reactist-alert-tone-critical-icon: #b03d32;\n --reactist-alert-tone-critical-border: var(--reactist-chromatic-content-red);\n --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);\n}\n","",{version:3,sources:["webpack://src/new-components/default-styles.less"],names:[],mappings:"AAAA;EACE;;;;;;;;;;;MAWI;EACF,mCAAA;EACA,oCAAA;EACF,kBAAkB;EAEhB,8BAAA;EACA,6BAAA;EACA,+BAAA;EACA,8BAAA;EACA,+BAAA;EACA,gCAAA;EAAF,eAAe;EAGb,kCAAA;EACA,+BAAA;EACA,+BAAA;EACA,mCAAA;EACA,iCAAA;EACA,uCAAA;EACA,wCAAA;EADF,gBAAgB;EAId,mCAAA;EACA,kCAAA;EACA,kCAAA;EAFF,gCAAgC;EAK9B,uCAAA;EACA,oCAAA;EACA,qDAAA;EACA,sDAAA;EAHF,kBAAkB;EAMhB,mCAAA;EACA,oCAAA;EAJF,qBAAqB;EAOnB,8BAAA;EACA,4BAAA;EACA,4BAAA;EACA,gCAAA;EACA,+BAAA;EALF,WAAW;EAQT,yCAAA;EACA,wCAAA;EACA,6CAAA;EACA,uCAAA;EACA,yCAAA;EACA,wCAAA;EACA,2CAAA;EACA,2CAAA;EACA,4CAAA;EACA,wCAAA;EACA,uCAAA;EACA,2CAAA;EACA,wCAAA;EACA,yCAAA;EAEA,+CAAA;EACA,iDAAA;EACA,+CAAA;EACA,kDAAA;EACA,yCAAA;EAEA,sCAAA;EACA,yCAAA;EACA,wCAAA;EACA,uCAAA;EACA,uCAAA;EACA,yCAAA;EACA,2CAAA;EACA,uCAAA;EACA,2CAAA;EAEA,yCAAA;EACA,4CAAA;EACA,2CAAA;EACA,qEAAA;EACA,8EAAA;EACA,0CAAA;EACA,0CAAA;EACA,4CAAA;EACA,8CAAA;EACA,0CAAA;EAEA,4CAAA;EACA,6CAAA;EACA,2CAAA;EAVF,uBAAuB;EAarB,kEAAA;EAXF,WAAW;EAcT,wCAAA;EACA,yEAAA;EACA,8DAAA;EAEA,4CAAA;EACA,8EAAA;EACA,gEAAA;EAEA,2CAAA;EACA,8EAAA;EACA,iEAAA;EAEA,4CAAA;EACA,4EAAA;EACA,iEAAA;AAfJ",sourcesContent:[":root {\n /*\n * breakpoints\n *\n * Unfortunately CSS custom properties are not available in media queries. So these are not\n * being used right now (although all uses of the hardcoded value are annotated with the names.\n *\n * We could manage these as pre-processor variables, but that would leave the question about how\n * is going to be possible to customize these values from consumer apps.\n *\n * See https://stackoverflow.com/q/40722882/621809\n * Possible solution: https://www.npmjs.com/package/postcss-media-variables\n */\n --reactist-breakpoint-tablet: 768px;\n --reactist-breakpoint-desktop: 992px;\n\n /* spacing sizes */\n --reactist-spacing-xsmall: 4px;\n --reactist-spacing-small: 8px;\n --reactist-spacing-medium: 12px;\n --reactist-spacing-large: 16px;\n --reactist-spacing-xlarge: 24px;\n --reactist-spacing-xxlarge: 32px;\n\n /* font sizes */\n --reactist-font-size-caption: 12px;\n --reactist-font-size-copy: 13px;\n --reactist-font-size-body: 14px;\n --reactist-font-size-subtitle: 16px;\n --reactist-font-size-header: 20px;\n --reactist-font-size-header-large: 24px;\n --reactist-font-size-header-xlarge: 32px;\n\n /* font weight */\n --reactist-font-weight-regular: 400;\n --reactist-font-weight-medium: 500;\n --reactist-font-weight-strong: 700;\n\n /* border and separator colors */\n --reactist-framework-separator: rgb(230, 230, 230);\n --reactist-framework-border: rgb(214, 214, 214);\n --reactist-framework-border-focus: rgba(0, 0, 0, 0.4);\n --reactist-framework-border-alpha: rgba(0, 0, 0, 0.15);\n\n /* border-radius */\n --reactist-border-radius-small: 5px;\n --reactist-border-radius-large: 10px;\n\n /* background color */\n --reactist-bg-default: rgb(255, 255, 255);\n --reactist-bg-brand: rgb(209, 69, 59);\n --reactist-bg-aside: rgb(250, 250, 250);\n --reactist-bg-highlight: rgb(242, 242, 242);\n --reactist-bg-selected: rgb(230, 230, 230);\n\n /* colors */\n --reactist-framework-fill-accent: rgb(224, 237, 255);\n --reactist-framework-fill-aside: rgb(250, 250, 250);\n --reactist-framework-fill-background: rgb(250, 250, 250);\n --reactist-framework-fill-base: rgb(255, 255, 255);\n --reactist-framework-fill-crater: rgb(242, 242, 242);\n --reactist-framework-fill-crest: rgb(230, 230, 230);\n --reactist-framework-fill-elevated: rgb(255, 255, 255);\n --reactist-framework-fill-selected: rgb(236, 236, 236);\n --reactist-framework-fill-highlight: rgb(242, 242, 242);\n --reactist-framework-fill-ledge: rgb(224, 224, 224);\n --reactist-framework-fill-peak: rgb(61, 61, 61);\n --reactist-framework-fill-pinnacle: rgb(235, 235, 235);\n --reactist-framework-fill-ridge: rgb(242, 242, 242);\n --reactist-framework-fill-summit: rgb(214, 214, 214);\n\n --reactist-content-primary: rgba(0, 0, 0, 0.88);\n --reactist-content-secondary: rgba(0, 0, 0, 0.56);\n --reactist-content-tertiary: rgba(0, 0, 0, 0.4);\n --reactist-content-quaternary: rgba(0, 0, 0, 0.24);\n --reactist-content-light-on-dark: rgb(255, 255, 255);\n\n --reactist-chromatic-fill-red: rgb(209, 69, 59);\n --reactist-chromatic-fill-orange: rgb(235, 141, 19);\n --reactist-chromatic-fill-green: rgb(5, 133, 39);\n --reactist-chromatic-fill-teal: rgb(0, 126, 158);\n --reactist-chromatic-fill-blue: rgb(36, 111, 224);\n --reactist-chromatic-fill-purple: rgb(105, 47, 194);\n --reactist-chromatic-fill-charcoal: rgb(82, 82, 82);\n --reactist-chromatic-fill-grey: rgb(128, 128, 128);\n --reactist-chromatic-fill-midnight: rgb(76, 91, 112);\n\n --reactist-chromatic-content-red: rgb(209, 69, 59);\n --reactist-chromatic-content-orange: rgb(235, 141, 19);\n --reactist-chromatic-content-green: rgb(5, 133, 39);\n --reactist-chromatic-content-green-background: rgba(5, 133, 39, 0.05);\n --reactist-chromatic-content-green-background-highlight: rgba(5, 133, 39, 0.1);\n --reactist-chromatic-content-teal: rgb(0, 126, 158);\n --reactist-chromatic-content-blue: rgb(36, 111, 224);\n --reactist-chromatic-content-purple: rgb(105, 47, 194);\n --reactist-chromatic-content-charcoal: rgb(82, 82, 82);\n --reactist-chromatic-content-grey: rgb(128, 128, 128);\n\n --reactist-chromatic-highlight-blue: rgb(88, 93, 100);\n --reactist-chromatic-highlight-green: rgb(216, 235, 221);\n --reactist-chromatic-highlight-red: rgb(252, 242, 242);\n\n /* component-specific */\n --reactist-switch-checked: var(--reactist-chromatic-content-green);\n\n /* alerts */\n --reactist-alert-tone-info-icon: #1d438c;\n --reactist-alert-tone-info-border: var(--reactist-chromatic-content-blue);\n --reactist-alert-tone-info-background: rgba(36, 111, 224, 0.1);\n\n --reactist-alert-tone-positive-icon: #035017;\n --reactist-alert-tone-positive-border: var(--reactist-chromatic-content-green);\n --reactist-alert-tone-positive-background: rgba(5, 133, 39, 0.1);\n\n --reactist-alert-tone-caution-icon: #5e3704;\n --reactist-alert-tone-caution-border: var(--reactist-chromatic-content-orange);\n --reactist-alert-tone-caution-background: rgba(235, 141, 19, 0.2);\n\n --reactist-alert-tone-critical-icon: #b03d32;\n --reactist-alert-tone-critical-border: var(--reactist-chromatic-content-red);\n --reactist-alert-tone-critical-background: rgba(209, 69, 59, 0.1);\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2622:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3b1oRRUM>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.mbc3LUo1>:not(:first-child){margin-top:var(--reactist-spacing-small)}.TErpU7nP>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._19PQeR--\x3e:not(:first-child){margin-top:var(--reactist-spacing-large)}._3BKTI-j7>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._1QQfSO-y>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.rQVejOPW>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.eCh5FkgK>:not(:first-child){margin-top:var(--reactist-spacing-small)}._29GNHdPc>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._1sChkByM>:not(:first-child){margin-top:var(--reactist-spacing-large)}._2KfFWNg1>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._3kgDZO8U>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._3SK4ZSq7>:not(:first-child){margin-top:var(--reactist-spacing-xsmall)}.L2TBoAaZ>:not(:first-child){margin-top:var(--reactist-spacing-small)}.qG_1ntRy>:not(:first-child){margin-top:var(--reactist-spacing-medium)}._2j6trIBI>:not(:first-child){margin-top:var(--reactist-spacing-large)}._12-ygMAC>:not(:first-child){margin-top:var(--reactist-spacing-xlarge)}._1YzVvjNw>:not(:first-child){margin-top:var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_3b1oRRUM","space-small":"mbc3LUo1","space-medium":"TErpU7nP","space-large":"_19PQeR--","space-xlarge":"_3BKTI-j7","space-xxlarge":"_1QQfSO-y","tablet-space-xsmall":"rQVejOPW","tablet-space-small":"eCh5FkgK","tablet-space-medium":"_29GNHdPc","tablet-space-large":"_1sChkByM","tablet-space-xlarge":"_2KfFWNg1","tablet-space-xxlarge":"_3kgDZO8U","desktop-space-xsmall":"_3SK4ZSq7","desktop-space-small":"L2TBoAaZ","desktop-space-medium":"qG_1ntRy","desktop-space-large":"_2j6trIBI","desktop-space-xlarge":"_12-ygMAC","desktop-space-xxlarge":"_1YzVvjNw"},module.exports=exports},2623:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3Rf-23qb{border:none;border-bottom:1px solid var(--reactist-framework-separator)}._1Jue_n_H{border-color:var(--reactist-framework-border-focus)}",""]),exports.locals={divider:"_3Rf-23qb","weight-strong":"_1Jue_n_H"},module.exports=exports},2625:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,".eMdJaLwo{color:var(--reactist-content-primary);font-weight:var(--reactist-font-weight-strong)}._3iAwnzzO{font-weight:var(--reactist-font-weight-regular)}._3p8-J0VZ{color:var(--reactist-content-secondary)}._1Qasvyzb{color:var(--reactist-chromatic-content-red)}h1.eMdJaLwo{font-size:var(--reactist-font-size-header)}h1._1-yjZY8K{font-size:var(--reactist-font-size-header-xlarge)}h1._3M5sPjXF{font-size:var(--reactist-font-size-header-large)}h1._1_j4Pm2D,h2.eMdJaLwo{font-size:var(--reactist-font-size-subtitle)}h2._1-yjZY8K{font-size:var(--reactist-font-size-header-large)}h2._3M5sPjXF{font-size:var(--reactist-font-size-header)}h2._1_j4Pm2D,h3.eMdJaLwo{font-size:var(--reactist-font-size-body)}h3._1-yjZY8K{font-size:var(--reactist-font-size-header)}h3._3M5sPjXF{font-size:var(--reactist-font-size-subtitle)}h3._1_j4Pm2D{font-size:var(--reactist-font-size-caption)}h4.eMdJaLwo,h5.eMdJaLwo,h6.eMdJaLwo{font-size:var(--reactist-font-size-body)}h4._1-yjZY8K,h5._1-yjZY8K,h6._1-yjZY8K{font-size:var(--reactist-font-size-header)}h4._3M5sPjXF,h5._3M5sPjXF,h6._3M5sPjXF{font-size:var(--reactist-font-size-subtitle)}._1Uy0Yp-U{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._2yqCSry4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._1UgXSTeE{-webkit-line-clamp:2}._1njU6r08{-webkit-line-clamp:3}._2wNi7jvQ{-webkit-line-clamp:4}._2wo2NW21{-webkit-line-clamp:5}",""]),exports.locals={heading:"eMdJaLwo","weight-light":"_3iAwnzzO","tone-secondary":"_3p8-J0VZ","tone-danger":"_1Qasvyzb","size-largest":"_1-yjZY8K","size-larger":"_3M5sPjXF","size-smaller":"_1_j4Pm2D","line-clamp-1":"_1Uy0Yp-U",lineClamp:"_2yqCSry4","line-clamp-2":"_1UgXSTeE","line-clamp-3":"_1njU6r08","line-clamp-4":"_2wNi7jvQ","line-clamp-5":"_2wo2NW21"},module.exports=exports},2626:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"AlignmentStory",(function(){return AlignmentStory})),__webpack_require__.d(__webpack_exports__,"WidthsStory",(function(){return WidthsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"FlexChildStory",(function(){return FlexChildStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(5),_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_box__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(144),_columns__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(8);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i) {\n return (\n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},AlignmentStory.parameters),WidthsStory.parameters=_objectSpread({storySource:{source:'function WidthsStory({ space }: PartialProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}'}},WidthsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory(args: PartialProps) {\n return (\n <>\n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n \n )\n}"}},ResponsiveStory.parameters),FlexChildStory.parameters=_objectSpread({storySource:{source:'function FlexChildStory(args: PartialProps) {\n return (\n \n \n \n \n \n \n {times(5).map((i) => (\n \n \n \n ))}\n \n \n \n )\n}'}},FlexChildStory.parameters);try{AlignmentStory.displayName="AlignmentStory",AlignmentStory.__docgenInfo={description:"",displayName:"AlignmentStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#AlignmentStory"]={docgenInfo:AlignmentStory.__docgenInfo,name:"AlignmentStory",path:"src/new-components/columns/columns.stories.tsx#AlignmentStory"})}catch(__react_docgen_typescript_loader_error){}try{WidthsStory.displayName="WidthsStory",WidthsStory.__docgenInfo={description:"",displayName:"WidthsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#WidthsStory"]={docgenInfo:WidthsStory.__docgenInfo,name:"WidthsStory",path:"src/new-components/columns/columns.stories.tsx#WidthsStory"})}catch(__react_docgen_typescript_loader_error){}try{ResponsiveStory.displayName="ResponsiveStory",ResponsiveStory.__docgenInfo={description:"",displayName:"ResponsiveStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#ResponsiveStory"]={docgenInfo:ResponsiveStory.__docgenInfo,name:"ResponsiveStory",path:"src/new-components/columns/columns.stories.tsx#ResponsiveStory"})}catch(__react_docgen_typescript_loader_error){}try{FlexChildStory.displayName="FlexChildStory",FlexChildStory.__docgenInfo={description:"",displayName:"FlexChildStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},collapseBelow:{defaultValue:null,description:"",name:"collapseBelow",required:!1,type:{name:'"tablet" | "desktop" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/columns/columns.stories.tsx#FlexChildStory"]={docgenInfo:FlexChildStory.__docgenInfo,name:"FlexChildStory",path:"src/new-components/columns/columns.stories.tsx#FlexChildStory"})}catch(__react_docgen_typescript_loader_error){}},2629:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._2L5zGsYJ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._2L5zGsYJ>._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}.SPcToWBT{margin-left:calc(var(--reactist-spacing-small)*-1)}.SPcToWBT ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}._34KmL1aL{margin-left:calc(var(--reactist-spacing-medium)*-1)}._34KmL1aL ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._3-IO4Ua9{margin-left:calc(var(--reactist-spacing-large)*-1)}._3-IO4Ua9 ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}._3c3sKQuS{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._3c3sKQuS ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._1LF97wKT{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._1LF97wKT ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1geI5sQZ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._1geI5sQZ ._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}._2x39uRmC{margin-left:calc(var(--reactist-spacing-small)*-1)}._2x39uRmC ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}._1wj9bZXt{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1wj9bZXt ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._2xPtCUIx{margin-left:calc(var(--reactist-spacing-large)*-1)}._2xPtCUIx ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}.hV0FeHTP{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.hV0FeHTP ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._2tXjCbOw{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._2tXjCbOw ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._264WtIQZ{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.hq9g6RX7 ._3QBzbLDq{padding-left:var(--reactist-spacing-xsmall)}.hq9g6RX7{margin-left:calc(var(--reactist-spacing-small)*-1)}.hq9g6RX7 ._3QBzbLDq{padding-left:var(--reactist-spacing-small)}.Qqka4eXS{margin-left:calc(var(--reactist-spacing-medium)*-1)}.Qqka4eXS ._3QBzbLDq{padding-left:var(--reactist-spacing-medium)}._1dQPZ4Mc{margin-left:calc(var(--reactist-spacing-large)*-1)}._1dQPZ4Mc ._3QBzbLDq{padding-left:var(--reactist-spacing-large)}._1DozdJT1{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._1DozdJT1 ._3QBzbLDq{padding-left:var(--reactist-spacing-xlarge)}._2vjJqslP{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}._2vjJqslP ._3QBzbLDq{padding-left:var(--reactist-spacing-xxlarge)}}.bfhlTd94{width:100%}._1CFc-5RN{flex:0 0 50%}._3xfjmaWI{flex:0 0 33.33333%}._2VQkmkcm{flex:0 0 66.66667%}._1FULVP2z{flex:0 0 25%}._3cdnxheZ{flex:0 0 75%}._3jkZjr5Y{flex:0 0 20%}._25dhGRvr{flex:0 0 40%}._2lN2kQ8T{flex:0 0 60%}._365V5wtc{flex:0 0 80%}._2L5zGsYJ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._2L5zGsYJ>*{margin-top:var(--reactist-spacing-xsmall)}.SPcToWBT{margin-top:calc(var(--reactist-spacing-small)*-1)}.SPcToWBT>*{margin-top:var(--reactist-spacing-small)}._34KmL1aL{margin-top:calc(var(--reactist-spacing-medium)*-1)}._34KmL1aL>*{margin-top:var(--reactist-spacing-medium)}._3-IO4Ua9{margin-top:calc(var(--reactist-spacing-large)*-1)}._3-IO4Ua9>*{margin-top:var(--reactist-spacing-large)}._3c3sKQuS{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._3c3sKQuS>*{margin-top:var(--reactist-spacing-xlarge)}._1LF97wKT{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._1LF97wKT>*{margin-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._1geI5sQZ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._3BzLxo2T>*{margin-top:var(--reactist-spacing-xsmall)}._2x39uRmC{margin-top:calc(var(--reactist-spacing-small)*-1)}._2x39uRmC>*{margin-top:var(--reactist-spacing-small)}._1wj9bZXt{margin-top:calc(var(--reactist-spacing-medium)*-1)}._1wj9bZXt>*{margin-top:var(--reactist-spacing-medium)}._2xPtCUIx{margin-top:calc(var(--reactist-spacing-large)*-1)}._2xPtCUIx>*{margin-top:var(--reactist-spacing-large)}.hV0FeHTP{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.hV0FeHTP>*{margin-top:var(--reactist-spacing-xlarge)}._2tXjCbOw{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._2tXjCbOw>*{margin-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._264WtIQZ{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._264WtIQZ>*{margin-top:var(--reactist-spacing-xsmall)}.hq9g6RX7{margin-top:calc(var(--reactist-spacing-small)*-1)}.hq9g6RX7>*{margin-top:var(--reactist-spacing-small)}.Qqka4eXS{margin-top:calc(var(--reactist-spacing-medium)*-1)}.Qqka4eXS>*{margin-top:var(--reactist-spacing-medium)}._1dQPZ4Mc{margin-top:calc(var(--reactist-spacing-large)*-1)}._1dQPZ4Mc>*{margin-top:var(--reactist-spacing-large)}._1DozdJT1{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._1DozdJT1>*{margin-top:var(--reactist-spacing-xlarge)}._2vjJqslP{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}._2vjJqslP>*{margin-top:var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_2L5zGsYJ",column:"_3QBzbLDq","space-small":"SPcToWBT","space-medium":"_34KmL1aL","space-large":"_3-IO4Ua9","space-xlarge":"_3c3sKQuS","space-xxlarge":"_1LF97wKT","tablet-space-xsmall":"_1geI5sQZ","tablet-space-small":"_2x39uRmC","tablet-space-medium":"_1wj9bZXt","tablet-space-large":"_2xPtCUIx","tablet-space-xlarge":"hV0FeHTP","tablet-space-xxlarge":"_2tXjCbOw","desktop-space-xsmall":"_264WtIQZ","desktop-space-small":"hq9g6RX7","desktop-space-medium":"Qqka4eXS","desktop-space-large":"_1dQPZ4Mc","desktop-space-xlarge":"_1DozdJT1","desktop-space-xxlarge":"_2vjJqslP","columnWidth-auto":"bfhlTd94","columnWidth-1-2":"_1CFc-5RN","columnWidth-1-3":"_3xfjmaWI","columnWidth-2-3":"_2VQkmkcm","columnWidth-1-4":"_1FULVP2z","columnWidth-3-4":"_3cdnxheZ","columnWidth-1-5":"_3jkZjr5Y","columnWidth-2-5":"_25dhGRvr","columnWidth-3-5":"_2lN2kQ8T","columnWidth-4-5":"_365V5wtc","tablet-tablet-space-xsmall":"_3BzLxo2T"},module.exports=exports},2630:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"HeadingStory",(function(){return HeadingStory})),__webpack_require__.d(__webpack_exports__,"TruncatedHeadingStory",(function(){return TruncatedHeadingStory})),__webpack_require__.d(__webpack_exports__,"HeadingPlaygroundStory",(function(){return HeadingPlaygroundStory}));__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_stack__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(41),_heading__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(30),_storybook_helper__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(5);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__webpack_exports__.default={title:"Design system/Heading",component:_heading__WEBPACK_IMPORTED_MODULE_12__.a,argTypes:{level:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["1","2","3","4","5","6"],"1"),size:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.i)(["largest","larger","smaller"]),weight:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["regular","light"],"regular"),lineClamp:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)([1,2,3,4,5],1),children:{control:{type:"text"},defaultValue:"Lorem ipsum dolor, sit amet consectetur adipisicing elit"},tone:Object(_storybook_helper__WEBPACK_IMPORTED_MODULE_13__.f)(["normal","secondary","danger"],"normal")}};var HeadingStory=function HeadingStory(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{dividers:!0,space:"medium"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"largest"},"Heading level 1, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"larger"},"Heading level 1, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1},"Heading level 1"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"smaller"},"Heading level 1, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"largest"},"Heading level 2, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"larger"},"Heading level 2, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2},"Heading level 2"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,size:"smaller"},"Heading level 2, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"largest"},"Heading level 3, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"larger"},"Heading level 3, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3},"Heading level 3"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:3,size:"smaller"},"Heading level 3, smaller")),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_stack__WEBPACK_IMPORTED_MODULE_11__.a,{space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4,size:"largest"},"Heading level 4 / 5 / 6, largest"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4,size:"larger"},"Heading level 4 / 5 / 6, larger"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:4},"Heading level 4 / 5 / 6"))))};HeadingStory.displayName="HeadingStory",HeadingStory.argTypes={level:{control:!1},size:{control:!1},weight:{control:!1},lineClamp:{control:!1},children:{control:!1},tone:{control:!1}};var TruncatedHeadingStory=function TruncatedHeadingStory(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:1,size:"largest",lineClamp:1},"This is a long title which we will use demonstrate truncating content. When this overflows and begins to drop to a new line, its overflowing content will be replaced by ellipses."),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,{level:2,lineClamp:2},"Now we have a subtitle which we will use to demostrate truncating to multiple lines. Sometimes we need to provide more context yet still remain skimmable to users, and subtitles are a good way to do this. As it’s much longer now we can allow a second line to be displayed before truncating it at two lines."))};TruncatedHeadingStory.displayName="TruncatedHeadingStory",TruncatedHeadingStory.argTypes={level:{control:!1},size:{control:!1},weight:{control:!1},lineClamp:{control:!1},children:{control:!1},tone:{control:!1}};var HeadingPlaygroundStory=function HeadingPlaygroundStory(_ref){var children=_ref.children,args=_objectWithoutProperties(_ref,["children"]);return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("section",{className:"story playground"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_heading__WEBPACK_IMPORTED_MODULE_12__.a,args,children))};HeadingPlaygroundStory.displayName="HeadingPlaygroundStory",HeadingStory.parameters=_objectSpread({storySource:{source:'function HeadingStory() {\n return (\n
\n \n \n \n Heading level 1, largest\n \n \n Heading level 1, larger\n \n Heading level 1\n \n Heading level 1, smaller\n \n \n\n \n \n Heading level 2, largest\n \n \n Heading level 2, larger\n \n Heading level 2\n \n Heading level 2, smaller\n \n \n\n \n \n Heading level 3, largest\n \n \n Heading level 3, larger\n \n Heading level 3\n \n Heading level 3, smaller\n \n \n\n \n \n Heading level 4 / 5 / 6, largest\n \n \n Heading level 4 / 5 / 6, larger\n \n Heading level 4 / 5 / 6\n \n \n
\n )\n}'}},HeadingStory.parameters),TruncatedHeadingStory.parameters=_objectSpread({storySource:{source:'function TruncatedHeadingStory() {\n return (\n
\n \n This is a long title which we will use demonstrate truncating content. When this\n overflows and begins to drop to a new line, its overflowing content will be replaced\n by ellipses.\n \n \n Now we have a subtitle which we will use to demostrate truncating to multiple lines.\n Sometimes we need to provide more context yet still remain skimmable to users, and\n subtitles are a good way to do this. As it’s much longer now we can allow a\n second line to be displayed before truncating it at two lines.\n \n
\n )\n}'}},TruncatedHeadingStory.parameters),HeadingPlaygroundStory.parameters=_objectSpread({storySource:{source:'function HeadingPlaygroundStory({\n children,\n ...args\n}: React.ComponentProps) {\n return (\n
\n {children}\n
\n )\n}'}},HeadingPlaygroundStory.parameters);try{HeadingPlaygroundStory.displayName="HeadingPlaygroundStory",HeadingPlaygroundStory.__docgenInfo={description:"",displayName:"HeadingPlaygroundStory",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"smaller" | "larger" | "largest" | undefined'}},level:{defaultValue:null,description:"",name:"level",required:!0,type:{name:"HeadingLevel"}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"regular" | "light" | undefined'}},tone:{defaultValue:null,description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/heading/heading.stories.tsx#HeadingPlaygroundStory"]={docgenInfo:HeadingPlaygroundStory.__docgenInfo,name:"HeadingPlaygroundStory",path:"src/new-components/heading/heading.stories.tsx#HeadingPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2631:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3PBgCLuk{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3PBgCLuk>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._1EQqWgsX{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._1EQqWgsX>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._12U1xEUI{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._12U1xEUI>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}._3Vq15WCN{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}._3Vq15WCN>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}._1qMcBSA4{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}._1qMcBSA4>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._2Ya091P2{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._2Ya091P2>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}@media (min-width:768px){._3BnTN3GQ{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3BnTN3GQ>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._2md5L24y{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._2md5L24y>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}._3ysAA2oN{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}._3ysAA2oN>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}._2KoqN92B{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}._2KoqN92B>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}._2nHdneYv{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}._2nHdneYv>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}.BI8mwh9K{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}.BI8mwh9K>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._3xos_1Ec{margin:calc(var(--reactist-spacing-xsmall)*-1) 0 0 calc(var(--reactist-spacing-xsmall)*-1)}._3xos_1Ec>*{margin:var(--reactist-spacing-xsmall) 0 0 var(--reactist-spacing-xsmall)}._1ZYtlaQe{margin:calc(var(--reactist-spacing-small)*-1) 0 0 calc(var(--reactist-spacing-small)*-1)}._1ZYtlaQe>*{margin:var(--reactist-spacing-small) 0 0 var(--reactist-spacing-small)}.YdLlurS5{margin:calc(var(--reactist-spacing-medium)*-1) 0 0 calc(var(--reactist-spacing-medium)*-1)}.YdLlurS5>*{margin:var(--reactist-spacing-medium) 0 0 var(--reactist-spacing-medium)}.yxsHB9YW{margin:calc(var(--reactist-spacing-large)*-1) 0 0 calc(var(--reactist-spacing-large)*-1)}.yxsHB9YW>*{margin:var(--reactist-spacing-large) 0 0 var(--reactist-spacing-large)}.SFaqC2zl{margin:calc(var(--reactist-spacing-xlarge)*-1) 0 0 calc(var(--reactist-spacing-xlarge)*-1)}.SFaqC2zl>*{margin:var(--reactist-spacing-xlarge) 0 0 var(--reactist-spacing-xlarge)}._2IDfe2UJ{margin:calc(var(--reactist-spacing-xxlarge)*-1) 0 0 calc(var(--reactist-spacing-xxlarge)*-1)}._2IDfe2UJ>*{margin:var(--reactist-spacing-xxlarge) 0 0 var(--reactist-spacing-xxlarge)}}",""]),exports.locals={"space-xsmall":"_3PBgCLuk","space-small":"_1EQqWgsX","space-medium":"_12U1xEUI","space-large":"_3Vq15WCN","space-xlarge":"_1qMcBSA4","space-xxlarge":"_2Ya091P2","tablet-space-xsmall":"_3BnTN3GQ","tablet-space-small":"_2md5L24y","tablet-space-medium":"_3ysAA2oN","tablet-space-large":"_2KoqN92B","tablet-space-xlarge":"_2nHdneYv","tablet-space-xxlarge":"BI8mwh9K","desktop-space-xsmall":"_3xos_1Ec","desktop-space-small":"_1ZYtlaQe","desktop-space-medium":"YdLlurS5","desktop-space-large":"yxsHB9YW","desktop-space-xlarge":"SFaqC2zl","desktop-space-xxlarge":"_2IDfe2UJ"},module.exports=exports},2632:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"NestedStacksStory",(function(){return NestedStacksStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(78);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),_storybook_helper__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(5),_heading__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(30),_stack__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(41);function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i & { itemCount: number }) {\n return (\n \n \n {times(itemCount).map((i) => (\n \n ))}\n \n \n )\n}"}},InteractivePropsStory.parameters),ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory({ itemCount }: { itemCount: number }) {\n return (\n <>\n \n \n \n {times(itemCount).map((i) => (\n \n ))}\n \n \n \n )\n}"}},ResponsiveStory.parameters),NestedStacksStory.parameters=_objectSpread({storySource:{source:'function NestedStacksStory(args: PartialProps) {\n return (\n <>\n \n \n Parent stack with space=“{args.space ?? \'none\'}”\n \n \n Nested stack with space=“xsmall”\n \n \n \n \n \n Nested stack with space=“xsmall”\n \n \n \n \n \n \n \n )\n}'}},NestedStacksStory.parameters);try{InteractivePropsStory.displayName="InteractivePropsStory",InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},dividers:{defaultValue:null,description:"",name:"dividers",required:!1,type:{name:'boolean | "strong" | "regular" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}},itemCount:{defaultValue:null,description:"",name:"itemCount",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#InteractivePropsStory"]={docgenInfo:InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/stack/stack.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}try{ResponsiveStory.displayName="ResponsiveStory",ResponsiveStory.__docgenInfo={description:"",displayName:"ResponsiveStory",props:{itemCount:{defaultValue:null,description:"",name:"itemCount",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#ResponsiveStory"]={docgenInfo:ResponsiveStory.__docgenInfo,name:"ResponsiveStory",path:"src/new-components/stack/stack.stories.tsx#ResponsiveStory"})}catch(__react_docgen_typescript_loader_error){}try{NestedStacksStory.displayName="NestedStacksStory",NestedStacksStory.__docgenInfo={description:"",displayName:"NestedStacksStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},dividers:{defaultValue:null,description:"",name:"dividers",required:!1,type:{name:'boolean | "strong" | "regular" | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/stack/stack.stories.tsx#NestedStacksStory"]={docgenInfo:NestedStacksStory.__docgenInfo,name:"NestedStacksStory",path:"src/new-components/stack/stack.stories.tsx#NestedStacksStory"})}catch(__react_docgen_typescript_loader_error){}},2633:function(module,exports,__webpack_require__){(exports=__webpack_require__(312)(!1)).push([module.i,"._3Eg84Gxm{font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._2vPa3hY9{font-size:var(--reactist-font-size-caption)}.KNXgq0Xg{font-size:var(--reactist-font-size-copy)}._2n06t_D7{font-size:var(--reactist-font-size-body)}._3VDhACkJ{font-size:var(--reactist-font-size-subtitle)}._2zYtK3m_{font-weight:var(--reactist-font-weight-medium)}.ol0zG77d{font-weight:var(--reactist-font-weight-strong)}.zPORrfzj{color:var(--reactist-content-secondary)}._2lgSOyOF{color:var(--reactist-chromatic-content-red)}._16YsJq7Y{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.FfDzE8ee{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._1_gxWVG9{-webkit-line-clamp:2}._3QzI87wT{-webkit-line-clamp:3}._2tMJfik8{-webkit-line-clamp:4}._3LyjhixI{-webkit-line-clamp:5}",""]),exports.locals={text:"_3Eg84Gxm","size-caption":"_2vPa3hY9","size-copy":"KNXgq0Xg","size-body":"_2n06t_D7","size-subtitle":"_3VDhACkJ","weight-semibold":"_2zYtK3m_","weight-bold":"ol0zG77d","tone-secondary":"zPORrfzj","tone-danger":"_2lgSOyOF","line-clamp-1":"_16YsJq7Y",lineClamp:"FfDzE8ee","line-clamp-2":"_1_gxWVG9","line-clamp-3":"_3QzI87wT","line-clamp-4":"_2tMJfik8","line-clamp-5":"_3LyjhixI"},module.exports=exports},2634:function(module,exports,__webpack_require__){var map={"./components/Avatar.stories.tsx":2635,"./components/Button.stories.tsx":2904,"./components/Checkbox.stories.tsx":2893,"./components/ColorPicker.stories.tsx":2894,"./components/Dropdown.stories.tsx":2787,"./components/ErrorMessage.stories.tsx":2895,"./components/Icon.stories.tsx":2889,"./components/Input.stories.tsx":2896,"./components/KeyCapturer.stories.mdx":2797,"./components/KeyboardShortcut.stories.tsx":2798,"./components/Loading.stories.tsx":2897,"./components/Menu.stories.tsx":2898,"./components/Modal.stories.mdx":2890,"./components/Notification.stories.tsx":2905,"./components/ProgressBar.stories.tsx":2899,"./components/RangeInput.stories.tsx":2900,"./components/Select.stories.tsx":2901,"./components/Tabs.stories.tsx":2906,"./components/Time.stories.tsx":2891,"./components/Tip.stories.tsx":2877,"./components/Tooltip.stories.tsx":2880,"./components/color.stories.tsx":2883,"./reactist/Reactist.stories.mdx":2886};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=2634},2635:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InitialsAvatarStory",(function(){return InitialsAvatarStory})),__webpack_require__.d(__webpack_exports__,"CustomColorAvatarStory",(function(){return CustomColorAvatarStory})),__webpack_require__.d(__webpack_exports__,"PictureAvatarStory",(function(){return PictureAvatarStory})),__webpack_require__.d(__webpack_exports__,"AvatarPlaygroundStory",(function(){return AvatarPlaygroundStory}));__webpack_require__(152),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2636);var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(681),_src_components_avatar__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(251);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)'}},InitialsAvatarStory.parameters),CustomColorAvatarStory.parameters=_objectSpread({storySource:{source:"() => (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)"}},CustomColorAvatarStory.parameters),PictureAvatarStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n {exampleData.map((data, index) => (\n \n ))}\n
\n)'}},PictureAvatarStory.parameters),AvatarPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n return (\n
\n \n
\n )\n}'}},AvatarPlaygroundStory.parameters);try{AvatarPlaygroundStory.displayName="AvatarPlaygroundStory",AvatarPlaygroundStory.__docgenInfo={description:"",displayName:"AvatarPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Avatar.stories.tsx#AvatarPlaygroundStory"]={docgenInfo:AvatarPlaygroundStory.__docgenInfo,name:"AvatarPlaygroundStory",path:"stories/components/Avatar.stories.tsx#AvatarPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2636:function(module,exports,__webpack_require__){var content=__webpack_require__(2637);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2637:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.avatars .reactist_avatar {\n display: inline-block;\n margin-right: 10px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/avatar_story.less"],names:[],mappings:"AAAA;EACI,qBAAA;EACA,kBAAA;AACJ",sourcesContent:[".story.avatars .reactist_avatar {\n display: inline-block;\n margin-right: 10px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2691:function(module,exports,__webpack_require__){var content=__webpack_require__(2692);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2692:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_avatar {\n flex-shrink: 0;\n background-position: center;\n color: white;\n text-align: center;\n border-radius: 50%;\n}\n.reactist_avatar_size--xxs {\n width: 16px;\n height: 16px;\n line-height: 16px;\n background-size: 16px;\n font-size: calc(16px / 2);\n}\n.reactist_avatar_size--xs {\n width: 20px;\n height: 20px;\n line-height: 20px;\n background-size: 20px;\n font-size: calc(20px / 2);\n}\n.reactist_avatar_size--s {\n width: 30px;\n height: 30px;\n line-height: 30px;\n background-size: 30px;\n font-size: calc(30px / 2);\n}\n.reactist_avatar_size--m {\n width: 32px;\n height: 32px;\n line-height: 32px;\n background-size: 32px;\n font-size: calc(32px / 2);\n}\n.reactist_avatar_size--l {\n width: 34px;\n height: 34px;\n line-height: 34px;\n background-size: 34px;\n font-size: calc(34px / 2);\n}\n.reactist_avatar_size--xl {\n width: 48px;\n height: 48px;\n line-height: 48px;\n background-size: 48px;\n font-size: calc(48px / 2);\n}\n.reactist_avatar_size--xxl {\n width: 70px;\n height: 70px;\n line-height: 70px;\n background-size: 70px;\n font-size: calc(70px / 2);\n}\n.reactist_avatar_size--xxxl {\n width: 100px;\n height: 100px;\n line-height: 100px;\n background-size: 100px;\n font-size: calc(100px / 2);\n}\n","",{version:3,sources:["webpack://src/components/avatar/avatar.less"],names:[],mappings:"AAQA;EACI,cAAA;EACA,2BAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AAPJ;AAUQ;EAfJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAQJ;AAMQ;EAlBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAeJ;AAEQ;EArBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAsBJ;AAFQ;EAxBJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AA6BJ;AANQ;EA3BJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAoCJ;AAVQ;EA9BJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AA2CJ;AAdQ;EAjCJ,WAAA;EACA,YAAA;EACA,iBAAA;EACA,qBAAA;EACA,yBAAA;AAkDJ;AAlBQ;EApCJ,YAAA;EACA,aAAA;EACA,kBAAA;EACA,sBAAA;EACA,0BAAA;AAyDJ",sourcesContent:[".reactist_avatar_size(@size) {\n width: @size;\n height: @size;\n line-height: @size;\n background-size: @size;\n font-size: calc(@size / 2);\n}\n\n.reactist_avatar {\n flex-shrink: 0;\n background-position: center;\n color: white;\n text-align: center;\n border-radius: 50%;\n\n &_size {\n &--xxs {\n .reactist_avatar_size(16px);\n }\n &--xs {\n .reactist_avatar_size(20px);\n }\n &--s {\n .reactist_avatar_size(30px);\n }\n &--m {\n .reactist_avatar_size(32px);\n }\n &--l {\n .reactist_avatar_size(34px);\n }\n &--xl {\n .reactist_avatar_size(48px);\n }\n &--xxl {\n .reactist_avatar_size(70px);\n }\n &--xxxl {\n .reactist_avatar_size(100px);\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2771:function(module,exports,__webpack_require__){var content=__webpack_require__(2772);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2772:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story .reactist_button {\n display: inline;\n margin: 0 10px 0 0;\n}\n.story.playground .reactist_button,\np .reactist_button--link {\n margin: 0 !important;\n}\n.alternate_branding > .reactist_button {\n background-color: #dd4b39;\n}\n.alternate_branding > .reactist_button:not(.reactist_button--loading):not(.reactist_button--secondary):not([disabled]):hover {\n background-color: #c23321;\n}\n.alternate_branding > .reactist_button:not(.reactist_button--loading):not(.reactist_button--secondary):disabled {\n background-color: #e47365;\n}\n.alternate_branding > .reactist_button.reactist_button--secondary {\n background-color: white;\n border: 1px solid #dd4b39;\n color: #dd4b39;\n}\n","",{version:3,sources:["webpack://stories/components/styles/button_story.less"],names:[],mappings:"AAAA;EACI,eAAA;EACA,kBAAA;AACJ;AACA;;EAEI,oBAAA;AACJ;AAOI;EACI,yBAAA;AALR;AAOQ;EACI,yBAAA;AALZ;AAQQ;EACI,yBAAA;AANZ;AASQ;EACI,uBAAA;EACA,yBAAA;EACA,cAAA;AAPZ",sourcesContent:[".story .reactist_button {\n display: inline;\n margin: 0 10px 0 0;\n}\n.story.playground .reactist_button,\np .reactist_button--link {\n margin: 0 !important;\n}\n\n.alternate_branding {\n @primary-color: #dd4b39;\n @primary-color-lighter: lighten(#dd4b39, 10%);\n @primary-color-darker: darken(#dd4b39, 10%);\n // alternate button styles\n & > .reactist_button {\n background-color: @primary-color;\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary):not([disabled]):hover {\n background-color: @primary-color-darker;\n }\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary):disabled {\n background-color: @primary-color-lighter;\n }\n\n &.reactist_button--secondary {\n background-color: white;\n border: 1px solid @primary-color;\n color: @primary-color;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2773:function(module,exports,__webpack_require__){var content=__webpack_require__(2774);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2774:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2775),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_button {\n cursor: pointer;\n user-select: none;\n color: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n}\n.reactist_button[aria-disabled='true'] {\n opacity: 0.4;\n cursor: not-allowed;\n}\n.reactist_button--small {\n font-size: 0.81rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.6;\n}\n.reactist_button--primary,\n.reactist_button--secondary,\n.reactist_button--danger {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n box-sizing: border-box;\n padding: 5px 15px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n}\n.reactist_button--primary.reactist_button--small,\n.reactist_button--secondary.reactist_button--small,\n.reactist_button--danger.reactist_button--small {\n padding: 5px 10px;\n}\n.reactist_button--primary.reactist_button--large,\n.reactist_button--secondary.reactist_button--large,\n.reactist_button--danger.reactist_button--large {\n padding: 10px 15px;\n}\n.reactist_button--primary {\n background-color: #3f82ef;\n color: white !important;\n}\n.reactist_button--primary:not([disabled]):hover {\n background-color: #3b7be2;\n}\n.reactist_button--danger {\n background-color: #de4c4a;\n color: white !important;\n}\n.reactist_button--danger:not([disabled]):hover {\n background-color: #cf2826;\n}\n.reactist_button--secondary {\n background-color: white;\n color: #202020 !important;\n border-color: #dcdcdc;\n}\n.reactist_button--secondary:not([disabled]):hover {\n background-color: #f9f9f9;\n}\n.reactist_button--link {\n color: #3f82ef;\n text-decoration: none;\n}\n.reactist_button--link:disabled {\n color: #808080;\n}\n.reactist_button--link:not(:disabled):hover {\n text-decoration: underline;\n}\n.reactist_button--link:not(.reactist_button--link--small):not(.reactist_button--link--large) {\n font-size: inherit;\n}\n.reactist_button--primary.reactist_button--loading,\n.reactist_button--secondary.reactist_button--loading,\n.reactist_button--danger.reactist_button--loading {\n cursor: progress !important;\n}\n.reactist_button--primary.reactist_button--loading:after,\n.reactist_button--secondary.reactist_button--loading:after,\n.reactist_button--danger.reactist_button--loading:after {\n background-repeat: no-repeat;\n background-size: 15px;\n content: '';\n display: inline-block;\n height: 15px;\n margin-left: 12px;\n vertical-align: middle;\n width: 15px;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: reactistRotateRight;\n animation-timing-function: linear;\n color: #ffffff;\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n}\n.reactist_button--secondary.reactist_button--loading {\n border-color: #dcdcdc;\n background-color: #dcdcdc;\n color: #808080;\n}\n@keyframes reactistRotateRight {\n from {\n transform: rotate(0deg);\n transform-origin: center center;\n }\n to {\n transform: rotate(360deg);\n transform-origin: center center;\n }\n}\n","",{version:3,sources:["webpack://src/components/button/button.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EACI,eAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,6BAAA;EACA,UAAA;AADJ;AAGI;EACI,YAAA;EACA,mBAAA;AADR;AAII;ECgCA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADjCJ;AAEI;;;ECoBA,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDnBI,sBAAA;EACA,iBAAA;EACA,oCAAA;EACA,kBAAA;AAGR;AAFQ;;;EACI,iBAAA;AAMZ;AAJQ;;;EACI,kBAAA;AAQZ;AAJI;EACI,yBAAA;EACA,uBAAA;AAMR;AAJQ;EACI,yBAAA;AAMZ;AAFI;EACI,yBAAA;EACA,uBAAA;AAIR;AAFQ;EACI,yBAAA;AAIZ;AAAI;EACI,uBAAA;EACA,yBAAA;EACA,qBAAA;AAER;AAAQ;EACI,yBAAA;AAEZ;AAEI;EACI,cAAA;EACA,qBAAA;AAAR;AAEQ;EACI,cAAA;AAAZ;AAGQ;EACI,0BAAA;AADZ;AAIQ;EACI,kBAAA;AAFZ;AAUQ;;;EACI,2BAAA;AANZ;AAOY;;;EACI,4BAAA;EACA,qBAAA;EACA,WAAA;EACA,qBAAA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,WAAA;EACA,sBAAA;EACA,mCAAA;EACA,mCAAA;EACA,iCAAA;EACA,cAAA;EACA,yDAAA;AAHhB;AAUI;EACI,qBAAA;EACA,yBAAA;EACA,cAAA;AARR;AAaA;EACI;IACI,uBAAA;IACA,+BAAA;EAXN;EAcE;IACI,yBAAA;IACA,+BAAA;EAZN;AACF",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_button {\n cursor: pointer;\n user-select: none;\n color: inherit;\n border: none;\n background-color: transparent;\n padding: 0;\n\n &[aria-disabled='true'] {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n &--small {\n .smaller_text();\n }\n\n &--primary,\n &--secondary,\n &--danger {\n .normal_text();\n box-sizing: border-box;\n padding: 5px 15px;\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n &.reactist_button--small {\n padding: 5px 10px;\n }\n &.reactist_button--large {\n padding: 10px 15px;\n }\n }\n\n &--primary {\n background-color: @primary_color;\n color: white !important;\n\n &:not([disabled]):hover {\n background-color: @primary_color_darker;\n }\n }\n\n &--danger {\n background-color: @color_red;\n color: white !important;\n\n &:not([disabled]):hover {\n background-color: darken(@color_red, 10%);\n }\n }\n\n &--secondary {\n background-color: white;\n color: @primary_font_color !important;\n border-color: @color_border_grey;\n\n &:not([disabled]):hover {\n background-color: @color_grey_9;\n }\n }\n\n &--link {\n color: @primary_color;\n text-decoration: none;\n\n &:disabled {\n color: @secondary_font_color;\n }\n\n &:not(:disabled):hover {\n text-decoration: underline;\n }\n\n &:not(&--small):not(&--large) {\n font-size: inherit;\n }\n }\n\n // loading-like buttons are only supported for the primary, secondary and danger variants\n &--primary,\n &--secondary,\n &--danger {\n &.reactist_button--loading {\n cursor: progress !important;\n &:after {\n background-repeat: no-repeat;\n background-size: 15px;\n content: '';\n display: inline-block;\n height: 15px;\n margin-left: 12px;\n vertical-align: middle;\n width: 15px;\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: reactistRotateRight;\n animation-timing-function: linear;\n color: #ffffff;\n background-image: url('../icons/spinner.svg');\n }\n }\n }\n\n // we treat secondary buttons differently because the loading indicator is white\n // TODO: make the loading indicator color adaptable from the outside using SVG currentColor\n &--secondary.reactist_button--loading {\n border-color: @color_border_grey;\n background-color: @color_border_grey;\n color: @secondary_font_color;\n }\n}\n\n// Animation used by the busy state of a button\n@keyframes reactistRotateRight {\n from {\n transform: rotate(0deg);\n transform-origin: center center;\n }\n\n to {\n transform: rotate(360deg);\n transform-origin: center center;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2775:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/spinner.0a24d9f7.svg';"},2776:function(module,exports,__webpack_require__){var content=__webpack_require__(2777);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2777:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tooltip {\n font-size: 0.81rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.6;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n padding: 5px 10px;\n background-color: #333333;\n color: white;\n border: none;\n border-radius: 3px;\n z-index: 1000;\n}\n","",{version:3,sources:["webpack://src/components/tooltip/tooltip.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAIA;EC2CI,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED5CA,kBAAA;EACA,uBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,kBAAA;EACA,aAAA;AAAJ",sourcesContent:["@import '../styles/constants.less';\n\n@tooltip_background: @color_almost_black;\n\n.reactist_tooltip {\n .smaller_text();\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n padding: 5px 10px;\n background-color: @tooltip_background;\n color: white;\n border: none;\n border-radius: 3px;\n z-index: @z-index-tooltip;\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2778:function(module,exports,__webpack_require__){var content=__webpack_require__(2779);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2779:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_checkbox {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_checkbox:hover {\n cursor: pointer;\n}\n.reactist_checkbox .reactist_checkbox--input {\n margin-right: 10px;\n}\n","",{version:3,sources:["webpack://src/components/checkbox/checkbox.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrCJ;AADI;EACI,eAAA;AAGR;AANA;EAOQ,kBAAA;AAER",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_checkbox {\n .normal_text();\n &:hover {\n cursor: pointer;\n }\n\n .reactist_checkbox--input {\n margin-right: 10px;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2783:function(module,exports,__webpack_require__){var content=__webpack_require__(2784);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2784:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_color_picker .color_trigger {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n cursor: pointer;\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAgMSAuNzA3LjcwOEwxMi42MDQgMTRhMSAxIDAgMCAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwIDEgLjcwNy0uNzA4eiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 24px;\n}\n.reactist_color_picker .color_trigger--inner_ring {\n background-color: rgba(0, 0, 0, 0.1);\n width: 14px;\n height: 14px;\n border-radius: 50%;\n visibility: hidden;\n}\n.reactist_color_picker .color_trigger:hover .color_trigger--inner_ring {\n visibility: visible;\n}\n.reactist_color_picker .color_trigger.small {\n height: 18px;\n width: 18px;\n}\n.reactist_color_picker .color_trigger.small .color_trigger--inner_ring {\n width: 12px;\n height: 12px;\n}\n.reactist_color_picker .color_item {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 4px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n cursor: pointer;\n}\n.reactist_color_picker .color_item--inner_ring {\n background-color: transparent;\n border: 2px solid white;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n visibility: hidden;\n}\n.reactist_color_picker .color_item:hover .color_item--inner_ring {\n visibility: visible;\n}\n.reactist_color_picker .color_item.active {\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMSAxIC44NjMuNDk5bC00LjQ3IDcuNzQ0YS40OTkuNDk5IDAgMCAxLS43MzUuMTQ3LjUwMi41MDIgMCAwIDEtLjA2MS0uMDQ4bC0zLjM2Ni0zLjE0YS40OTkuNDk5IDAgMSAxIC42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_color_picker .color_options {\n padding: 6px;\n display: flex;\n flex-wrap: wrap;\n width: 164px;\n position: relative;\n}\n.reactist_color_picker .with_arrow:after,\n.reactist_color_picker .with_arrow:before {\n visibility: hidden;\n}\n","",{version:3,sources:["webpack://src/components/color-picker/color-picker.less"],names:[],mappings:"AAEA;EAEQ,cAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EAEA,yYAAA;EACA,2BAAA;EACA,4BAAA;EACA,qBAAA;AAHR;AAKQ;EACI,oCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AAHZ;AAKQ;EAEQ,mBAAA;AAJhB;AAQQ;EACI,YAAA;EACA,WAAA;AANZ;AAIQ;EAKQ,WAAA;EACA,YAAA;AANhB;AA7BA;EAyCQ,cAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;AATR;AAWQ;EACI,6BAAA;EACA,uBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,kBAAA;AATZ;AAWQ;EAEQ,mBAAA;AAVhB;AAcQ;EACI,6bAAA;EACA,2BAAA;EACA,4BAAA;AAZZ;AAxDA;EAyEQ,YAAA;EACA,aAAA;EACA,eAAA;EACA,YAAA;EACA,kBAAA;AAdR;AA/DA;;EAkFQ,kBAAA;AAfR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_color_picker {\n .color_trigger {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n cursor: pointer;\n\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOS4yNSAxMC42NDZsMi42NDYgMi42NDcgMi42NDctMi42NDdhLjUuNSAwIDAgMSAuNzA3LjcwOEwxMi42MDQgMTRhMSAxIDAgMCAxLTEuNDE1IDBsLTIuNjQ2LTIuNjQ2YS41LjUgMCAwIDEgLjcwNy0uNzA4eiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n background-size: 24px;\n\n &--inner_ring {\n background-color: rgba(0, 0, 0, 0.1);\n width: 14px;\n height: 14px;\n border-radius: 50%;\n visibility: hidden;\n }\n &:hover {\n .color_trigger--inner_ring {\n visibility: visible;\n }\n }\n\n &.small {\n height: 18px;\n width: 18px;\n\n .color_trigger--inner_ring {\n width: 12px;\n height: 12px;\n }\n }\n }\n\n .color_item {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 4px;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n cursor: pointer;\n\n &--inner_ring {\n background-color: transparent;\n border: 2px solid white;\n height: 24px;\n width: 24px;\n border-radius: 50%;\n visibility: hidden;\n }\n &:hover {\n .color_item--inner_ring {\n visibility: visible;\n }\n }\n\n &.active {\n background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI0ZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuOTc0IDE0Ljc3MWw0LjE2LTcuMjA0YS40OTkuNDk5IDAgMSAxIC44NjMuNDk5bC00LjQ3IDcuNzQ0YS40OTkuNDk5IDAgMCAxLS43MzUuMTQ3LjUwMi41MDIgMCAwIDEtLjA2MS0uMDQ4bC0zLjM2Ni0zLjE0YS40OTkuNDk5IDAgMSAxIC42OC0uNzI5bDIuOTI5IDIuNzMxeiIvPjwvc3ZnPg==);\n background-position: center;\n background-repeat: no-repeat;\n }\n }\n\n .color_options {\n padding: 6px;\n display: flex;\n flex-wrap: wrap;\n width: 164px; // 4 * 32 + 3 * 8 + 2 * 6\n position: relative;\n }\n\n .with_arrow:after,\n .with_arrow:before {\n visibility: hidden;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2785:function(module,exports,__webpack_require__){var content=__webpack_require__(2786);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2786:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_dropdown .trigger {\n cursor: pointer;\n display: block;\n}\n.reactist_dropdown .body {\n border-radius: 3px;\n border: 1px solid #dcdcdc;\n overflow: hidden;\n box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);\n z-index: 1;\n background-color: #fff;\n}\n.reactist_dropdown hr {\n border: none;\n height: 1px;\n background-color: #dcdcdc;\n margin: 0 5px;\n}\n.reactist_dropdown .with_arrow:after,\n.reactist_dropdown .with_arrow:before {\n z-index: 1;\n content: '';\n display: block;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px;\n right: 14px;\n}\n.reactist_dropdown .with_arrow:after {\n top: -11px;\n border-color: transparent transparent #fff transparent;\n}\n.reactist_dropdown .with_arrow:before {\n top: -12px;\n border-color: transparent transparent #dcdcdc transparent;\n}\n.reactist_dropdown .with_arrow.top:after {\n top: -1px;\n border-color: #fff transparent transparent transparent;\n}\n.reactist_dropdown .with_arrow.top:before {\n top: -1px;\n right: 13px;\n border-width: 7px;\n border-color: #dcdcdc transparent transparent transparent;\n}\n","",{version:3,sources:["webpack://src/components/dropdown/dropdown.less"],names:[],mappings:"AAEA;EAEQ,eAAA;EACA,cAAA;AAFR;AADA;EAOQ,kBAAA;EACA,yBAAA;EACA,gBAAA;EACA,2CAAA;EACA,UAAA;EACA,sBAAA;AAHR;AATA;EAgBQ,YAAA;EACA,WAAA;EACA,yBAAA;EACA,aAAA;AAJR;AAfA;;EAwBQ,UAAA;EACA,WAAA;EACA,cAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,mBAAA;EACA,iBAAA;EACA,WAAA;AALR;AA3BA;EAoCQ,UAAA;EACA,sDAAA;AANR;AA/BA;EAyCQ,UAAA;EACA,yDAAA;AAPR;AAnCA;EA8CQ,SAAA;EACA,sDAAA;AARR;AAvCA;EAmDQ,SAAA;EACA,WAAA;EACA,iBAAA;EACA,yDAAA;AATR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_dropdown {\n .trigger {\n cursor: pointer;\n display: block;\n }\n\n .body {\n border-radius: 3px;\n border: 1px solid @color_border_grey;\n overflow: hidden;\n box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.08);\n z-index: 1;\n background-color: #fff;\n }\n\n hr {\n border: none;\n height: 1px;\n background-color: @color_border_grey;\n margin: 0 5px;\n }\n\n .with_arrow:after,\n .with_arrow:before {\n z-index: 1;\n content: '';\n display: block;\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 6px;\n right: 14px;\n }\n\n .with_arrow:after {\n top: -11px;\n border-color: transparent transparent #fff transparent;\n }\n\n .with_arrow:before {\n top: -12px;\n border-color: transparent transparent @color_border_grey transparent;\n }\n\n .with_arrow.top:after {\n top: -1px;\n border-color: #fff transparent transparent transparent;\n }\n\n .with_arrow.top:before {\n top: -1px;\n right: 13px;\n border-width: 7px;\n border-color: @color_border_grey transparent transparent transparent;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2787:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"DropdownStory",(function(){return DropdownStory})),__webpack_require__.d(__webpack_exports__,"InteractiveDropdownStory",(function(){return InteractiveDropdownStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__),_src_components_dropdown__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(115),_src_components_button__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(16);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n \n \n \n \n
\n

Dropdown Content

\n
    \n
  • You can add anything
    • \n
  • you want to a dropdown
    • \n
  • (e.g. lists and headings)
    • \n
\n
\n \n \n
\n)'}},DropdownStory.parameters),InteractiveDropdownStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n \n \n \n \n \n
\n

Wow this is interactive

\n
    \n
  • Click outside
    • \n
  • to close this
    • \n
\n
\n \n \n
\n)'}},InteractiveDropdownStory.parameters)},2788:function(module,exports,__webpack_require__){var content=__webpack_require__(2789);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2789:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2790),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_error_message {\n padding: 10px 10px 0 10px;\n margin-bottom: 10px;\n background-color: #f8d9d8;\n border: 1px solid #de4c4a;\n}\n.reactist_error_message p {\n font-size: 0.875rem;\n color: #de4c4a;\n font-weight: 400;\n line-height: 1.7;\n margin: 0 0 10px 0;\n}\n.reactist_error_message .dismiss_icon {\n height: 20px;\n width: 20px;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n float: right;\n position: relative;\n top: -30px;\n}\n.reactist_error_message .dismiss_icon:hover {\n cursor: pointer;\n}\n","",{version:3,sources:["webpack://src/components/error-message/error-message.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EACI,yBAAA;EACA,mBAAA;EACA,yBAAA;EACA,yBAAA;AADJ;AAHA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDhCI,kBAAA;AAER;AAVA;EAYQ,YAAA;EACA,WAAA;EACA,4BAAA;EACA,2BAAA;EACA,yDAAA;EACA,YAAA;EACA,kBAAA;EACA,UAAA;AACR;AAAQ;EACI,eAAA;AAEZ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_error_message {\n padding: 10px 10px 0 10px;\n margin-bottom: 10px;\n background-color: lighten(@color_red, 33%);\n border: 1px solid @color_red;\n\n p {\n .normal_text(@color: @color_red);\n margin: 0 0 10px 0;\n }\n\n .dismiss_icon {\n height: 20px;\n width: 20px;\n background-repeat: no-repeat;\n background-position: center;\n background-image: url('../icons/close_red.svg');\n float: right;\n position: relative;\n top: -30px;\n &:hover {\n cursor: pointer;\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2790:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/close_red.d30aacaf.svg';"},2791:function(module,exports,__webpack_require__){var content=__webpack_require__(2792);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2792:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_icon {\n flex: 0 0 auto;\n display: block;\n width: 40px;\n height: 40px;\n background-size: 25px;\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_icon.disabled {\n opacity: 0.4;\n}\n.reactist_icon--component {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n","",{version:3,sources:["webpack://src/components/icon/icon.less"],names:[],mappings:"AAAA;EACI,cAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,qBAAA;EACA,2BAAA;EACA,4BAAA;AACJ;AACI;EACI,YAAA;AACR;AAEI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;AAAR",sourcesContent:[".reactist_icon {\n flex: 0 0 auto;\n display: block;\n width: 40px;\n height: 40px;\n background-size: 25px;\n background-position: center;\n background-repeat: no-repeat;\n\n &.disabled {\n opacity: 0.4;\n }\n\n &--component {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2793:function(module,exports,__webpack_require__){var content=__webpack_require__(2794);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2794:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story-info {\n color: #565d6b;\n font-size: 14px;\n line-height: 1.5;\n margin-bottom: 50px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/input_story.less"],names:[],mappings:"AAAA;EACI,cAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;AACJ",sourcesContent:[".story-info {\n color: rgb(86, 93, 107);\n font-size: 14px;\n line-height: 1.5;\n margin-bottom: 50px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2795:function(module,exports,__webpack_require__){var content=__webpack_require__(2796);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2796:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_input {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n box-sizing: border-box;\n width: 100%;\n display: block;\n outline: none;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n padding: 5px 10px;\n margin: 0;\n}\n.reactist_input:focus {\n border-color: #3f82ef;\n}\n.reactist_input:disabled {\n background-color: #fafafa;\n}\n","",{version:3,sources:["webpack://src/components/input/input.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDtCA,sBAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;EACA,yBAAA;EACA,kBAAA;EACA,iBAAA;EACA,SAAA;AAEJ;AAAI;EACI,qBAAA;AAER;AAAI;EACI,yBAAA;AAER",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_input {\n .normal_text();\n box-sizing: border-box;\n width: 100%;\n display: block;\n outline: none;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n padding: 5px 10px;\n margin: 0;\n\n &:focus {\n border-color: @primary_color;\n }\n &:disabled {\n background-color: @color_grey_11;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2797:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(57);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.c,{title:"Components/KeyCapturer",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h1",{id:"component-documentation"},"Component Documentation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"documentation"},"Documentation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Use this component to wrap anything you want to handle key events for (e.g. an input)."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can specify the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"eventName")," to capture (defaults to ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onKeyDown"),")."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Check the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"SUPPORTED_KEYS")," map to see which keys are supported and supply the respective ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"on\\${Key}")," prop (i.e. ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onEnter")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onArrowDown"),"). Note that the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onEnter")," handler will not fire when used in an IME composition session to prevent interference with the user's input."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"If you want the default behaviour to be preserved (i.e. only want to hook into the event instead of replacing it) set the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"propagate\\${Key}")," prop (e.g. ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"propagateBackspace"),")."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Example of an ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"strong"},""))," handling normal keystrokes by acting on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"onChange")," as well as on enter and backspace presses with dedicated handlers. By propagating the backspace key users are still able to delete the last typed character while you can also implement additional logic on top."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"\n \n\n")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Components/KeyCapturer",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},2798:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"KeyboardShortcutPlaygroundStory",(function(){return KeyboardShortcutPlaygroundStory}));__webpack_require__(961),__webpack_require__(475),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(681),_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__=(__webpack_require__(2799),__webpack_require__(487));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}__webpack_exports__.default={title:"Components/KeyboardShortcut"};var KeyboardShortcutPlaygroundStory=function KeyboardShortcutPlaygroundStory(args){var shortcut=args.shortcut.length>1?args.shortcut:args.shortcut[0]||"";return react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("section",{className:"story"},react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("pre",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("code",null,"",react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("br",null),"  ","string"==typeof shortcut?shortcut:react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_11___default.a.Fragment,null,"{",JSON.stringify(shortcut),"}"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("br",null),"")),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("p",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("strong",null,"On macOS:"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__.a,{isMac:!0},shortcut)),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("p",null,react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement("strong",null,"Elsewhere:"),react__WEBPACK_IMPORTED_MODULE_11___default.a.createElement(_src_components_keyboard_shortcut__WEBPACK_IMPORTED_MODULE_14__.a,{isMac:!1},shortcut)))};KeyboardShortcutPlaygroundStory.displayName="KeyboardShortcutPlaygroundStory",KeyboardShortcutPlaygroundStory.args={shortcut:Object(_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_12__.a)("Shortcut","Cmd + Alt + Shift + E, q").split(/\s*,\s*/)},KeyboardShortcutPlaygroundStory.argTypes={shortcut:{control:{type:"text"}}},KeyboardShortcutPlaygroundStory.parameters=function _objectSpread(target){for(var i=1;i {\n const shortcut = args.shortcut.length > 1 ? args.shortcut : args.shortcut[0] || ''\n\n return (\n
\n 
\n                \n                    <KeyboardShortcut>\n                    
\n                      \n                    {typeof shortcut === 'string' ? (\n                        shortcut\n                    ) : (\n                        <>\n                            {'{'}\n                            {JSON.stringify(shortcut)}\n                            {'}'}\n                        \n                    )}\n                    
\n                    </KeyboardShortcut>\n                \n
\n

\n On macOS:\n {shortcut}\n

\n

\n Elsewhere:\n {shortcut}\n

\n
\n )\n}"}},KeyboardShortcutPlaygroundStory.parameters);try{KeyboardShortcutPlaygroundStory.displayName="KeyboardShortcutPlaygroundStory",KeyboardShortcutPlaygroundStory.__docgenInfo={description:"",displayName:"KeyboardShortcutPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/KeyboardShortcut.stories.tsx#KeyboardShortcutPlaygroundStory"]={docgenInfo:KeyboardShortcutPlaygroundStory.__docgenInfo,name:"KeyboardShortcutPlaygroundStory",path:"stories/components/KeyboardShortcut.stories.tsx#KeyboardShortcutPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2799:function(module,exports,__webpack_require__){var content=__webpack_require__(2800);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2800:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_keyboard_shortcut {\n font: 11px Menlo, monospace;\n}\n.reactist_keyboard_shortcut > kbd > kbd {\n display: inline-block;\n padding: 3px 5px;\n margin: 0 2px;\n line-height: normal;\n line-height: 10px;\n color: #202020;\n vertical-align: middle;\n background-color: #fafafa;\n border: 1px solid #dcdcdc;\n border-radius: 6px;\n box-shadow: inset 0 -1px 0 #dcdcdc;\n}\n","",{version:3,sources:["webpack://src/components/keyboard-shortcut/keyboard-shortcut.less"],names:[],mappings:"AAEA;EACI,2BAAA;AADJ;AAAA;EAGQ,qBAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,sBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kBAAA;EACA,kCAAA;AAAR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_keyboard_shortcut {\n font: 11px Menlo, monospace;\n > kbd > kbd {\n display: inline-block;\n padding: 3px 5px;\n margin: 0 2px;\n line-height: normal;\n line-height: 10px;\n color: @primary_font_color;\n vertical-align: middle;\n background-color: @color_grey_11;\n border: 1px solid @color_border_grey;\n border-radius: 6px;\n box-shadow: inset 0 -1px 0 @color_border_grey;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2804:function(module,exports,__webpack_require__){var content=__webpack_require__(2805);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2805:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.loading .spinner--white {\n background-color: #3f82ef;\n}\n","",{version:3,sources:["webpack://stories/components/styles/loading_story.less"],names:[],mappings:"AAAA;EAEQ,yBAAA;AAAR",sourcesContent:[".story.loading {\n .spinner--white {\n background-color: #3f82ef;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2806:function(module,exports,__webpack_require__){var content=__webpack_require__(2807);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2807:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.reactist_loading {\n display: flex;\n align-items: center;\n justify-items: center;\n align-content: center;\n justify-content: center;\n flex: 1 1 auto;\n}\n.reactist_loading .reactist_loading--spinner svg {\n animation-name: spinner;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n","",{version:3,sources:["webpack://src/components/styles/animations.less","webpack://src/components/loading/loading.less"],names:[],mappings:"AAAA;EACI;IACI,UAAA;ECCN;EDCE;IACI,UAAA;ECCN;AACF;ADEA;EACI;IACI,uBAAA;ECAN;EDEE;IACI,yBAAA;ECAN;AACF;AAbA;EACI,aAAA;EACA,mBAAA;EACA,qBAAA;EACA,qBAAA;EACA,uBAAA;EACA,cAAA;AAeJ;AArBA;EASQ,uBAAA;EACA,wBAAA;EACA,mCAAA;EACA,iCAAA;AAeR",sourcesContent:["@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n","@import '../styles/animations.less';\n\n.reactist_loading {\n display: flex;\n align-items: center;\n justify-items: center;\n align-content: center;\n justify-content: center;\n flex: 1 1 auto;\n\n .reactist_loading--spinner svg {\n animation-name: spinner;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2808:function(module,exports,__webpack_require__){var content=__webpack_require__(2809);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2809:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story {\n font-family: Arial;\n}\n.story button[aria-haspopup='menu'] svg {\n fill: currentcolor;\n width: 0.65em;\n height: 0.65em;\n margin-left: 0.5em;\n}\n.story ul {\n list-style: none;\n padding: 0;\n}\n.story .item_box {\n min-width: 300px;\n display: flex;\n border: 1px solid grey;\n padding: 4px 10px;\n margin: 4px 0;\n user-select: none;\n}\n.story .item_box:hover {\n background-color: #efefef;\n}\n.story .item_box.menu_open {\n background-color: #cfcfcf;\n}\n.story .item_box .item_name {\n flex: 1;\n display: flex;\n align-items: center;\n}\n.story .menu_item_icon {\n padding-right: 10px;\n}\n.story .menu_item_label {\n flex: 1;\n}\n","",{version:3,sources:["webpack://stories/components/styles/menu_story.less"],names:[],mappings:"AAAA;EACI,kBAAA;AACJ;AAFA;EAIQ,kBAAA;EACA,aAAA;EACA,cAAA;EACA,kBAAA;AACR;AARA;EAUQ,gBAAA;EACA,UAAA;AACR;AAZA;EAcQ,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,aAAA;EACA,iBAAA;AACR;AAAQ;EACI,yBAAA;AAEZ;AAAQ;EACI,yBAAA;AAEZ;AA1BA;EA2BY,OAAA;EACA,aAAA;EACA,mBAAA;AAEZ;AA/BA;EAkCQ,mBAAA;AAAR;AAlCA;EAsCQ,OAAA;AADR",sourcesContent:[".story {\n font-family: Arial;\n\n button[aria-haspopup='menu'] svg {\n fill: currentcolor;\n width: 0.65em;\n height: 0.65em;\n margin-left: 0.5em;\n }\n ul {\n list-style: none;\n padding: 0;\n }\n .item_box {\n min-width: 300px;\n display: flex;\n border: 1px solid grey;\n padding: 4px 10px;\n margin: 4px 0;\n user-select: none;\n &:hover {\n background-color: #efefef;\n }\n &.menu_open {\n background-color: #cfcfcf;\n }\n .item_name {\n flex: 1;\n display: flex;\n align-items: center;\n }\n }\n\n .menu_item_icon {\n padding-right: 10px;\n }\n\n .menu_item_label {\n flex: 1;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2845:function(module,exports,__webpack_require__){var content=__webpack_require__(2846);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2846:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_menulist[role='menu'] {\n display: block;\n white-space: nowrap;\n background: hsla(0, 0%, 100%, 0.99);\n outline: none;\n font-size: 0.81rem;\n padding: 4px 0;\n min-width: 180px;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n}\n.reactist_menulist[role='menu'] [role='menuitem'],\n.reactist_menulist[role='menu'] .reactist_menugroup__label {\n user-select: none;\n outline: none;\n text-align: left;\n display: flex;\n align-items: center;\n padding: 5px 10px;\n color: inherit;\n border: none;\n background-color: transparent;\n}\n.reactist_menulist[role='menu'] .reactist_menugroup__label {\n color: #808080;\n font-size: 0.75rem;\n}\n.reactist_menulist[role='menu'] .reactist_submenu_button {\n padding-right: 16px;\n}\n.reactist_menulist[role='menu'] .reactist_submenu_button::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent #808080;\n display: block;\n width: 0;\n right: 6px;\n}\n.reactist_menulist[role='menu'] [role='menuitem'] {\n width: 100%;\n box-sizing: border-box;\n}\n.reactist_menulist[role='menu'] [role='menuitem']:focus,\n.reactist_menulist[role='menu'] [role='menuitem'][aria-expanded='true'] {\n color: #202020;\n background-color: #ececec;\n}\n.reactist_menulist[role='menu'] [role='menuitem'][aria-disabled],\n.reactist_menulist[role='menu'] [role='menuitem']:disabled {\n color: #808080;\n pointer-events: none;\n}\n.reactist_menulist[role='menu'] a[role='menuitem'] {\n cursor: default;\n text-decoration: none;\n}\n.reactist_menulist[role='menu'] a[role='menuitem']:hover {\n text-decoration: none;\n}\n.reactist_menulist[role='menu'] [role='menu'] {\n margin-top: -5px;\n}\n.reactist_menulist[role='menu'] hr {\n border: none;\n height: 1px;\n background-color: #dcdcdc;\n margin: 4px 0;\n}\n","",{version:3,sources:["webpack://src/components/menu/menu.less"],names:[],mappings:"AAEA;EACI,cAAA;EACA,mBAAA;EACA,mCAAA;EACA,aAAA;EACA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,yBAAA;EACA,kBAAA;AADJ;AARA;;EAaQ,iBAAA;EACA,aAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,YAAA;EACA,6BAAA;AADR;AApBA;EAyBQ,cAAA;EACA,kBAAA;AAFR;AAxBA;EA8BQ,mBAAA;AAHR;AA3BA;EAkCQ,WAAA;EACA,kBAAA;EACA,mBAAA;EACA,2BAAA;EACA,iCAAA;EACA,cAAA;EACA,QAAA;EACA,UAAA;AAJR;AArCA;EA6CQ,WAAA;EACA,sBAAA;AALR;AAMQ;;EAEI,cAAA;EACA,yBAAA;AAJZ;AAMQ;;EAEI,cAAA;EACA,oBAAA;AAJZ;AAnDA;EA4DQ,eAAA;EACA,qBAAA;AANR;AAOQ;EACI,qBAAA;AALZ;AA1DA;EAqEQ,gBAAA;AARR;AA7DA;EAyEQ,YAAA;EACA,WAAA;EACA,yBAAA;EACA,aAAA;AATR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_menulist[role='menu'] {\n display: block;\n white-space: nowrap;\n background: hsla(0, 100%, 100%, 0.99);\n outline: none;\n font-size: @smaller_font_size;\n padding: 4px 0;\n min-width: 180px;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n\n [role='menuitem'],\n .reactist_menugroup__label {\n user-select: none;\n outline: none;\n text-align: left;\n display: flex;\n align-items: center;\n padding: 5px 10px;\n color: inherit;\n border: none;\n background-color: transparent;\n }\n\n .reactist_menugroup__label {\n color: @secondary_font_color;\n font-size: @tiny_font_size;\n }\n\n .reactist_submenu_button {\n padding-right: 16px;\n }\n\n .reactist_submenu_button::after {\n content: '';\n position: absolute;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent @secondary_font_color;\n display: block;\n width: 0;\n right: 6px;\n }\n\n [role='menuitem'] {\n width: 100%;\n box-sizing: border-box;\n &:focus,\n &[aria-expanded='true'] {\n color: @primary_font_color;\n background-color: @color_grey_10;\n }\n &[aria-disabled],\n &:disabled {\n color: @secondary_font_color;\n pointer-events: none;\n }\n }\n\n a[role='menuitem'] {\n cursor: default;\n text-decoration: none;\n &:hover {\n text-decoration: none;\n }\n }\n\n // sub-menus need to be shifted a bit towards the top to be aligned with its menu item\n [role='menu'] {\n margin-top: -5px;\n }\n\n hr {\n border: none;\n height: 1px;\n background-color: @color_border_grey;\n margin: 4px 0;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2847:function(module,exports,__webpack_require__){var content=__webpack_require__(2848);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2848:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"[id$='-modal--modal-playground-story'] .reactist_overlay {\n position: inherit;\n}\n","",{version:3,sources:["webpack://stories/components/styles/modal_story.less"],names:[],mappings:"AAKQ;EACI,iBAAA;AAJZ",sourcesContent:["// We don't want the modal playground to be fixed and in the centre for the docs tab\n// The selector targets just the suffix of the story's id in case we change our\n// stories' hierarchy in the future\n[id$='-modal--modal-playground-story'] {\n .reactist {\n &_overlay {\n position: inherit;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2849:function(module,exports,__webpack_require__){var content=__webpack_require__(2850);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},285:function(module,__webpack_exports__,__webpack_require__){"use strict";var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),CloseIcon=function CloseIcon(){return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("path",{fill:"gray",fillRule:"evenodd",d:"M11.293 12L5.146 5.854a.5.5 0 1 1 .708-.708L12 11.293l6.146-6.147a.5.5 0 0 1 .708.708L12.707 12l6.147 6.146a.5.5 0 0 1-.708.708L12 12.707l-6.146 6.147a.5.5 0 0 1-.708-.708L11.293 12z"}))};CloseIcon.displayName="CloseIcon",__webpack_exports__.a=CloseIcon},2850:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,"@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.reactist_overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n background: rgba(0, 0, 0, 0.7);\n overflow: auto;\n animation: fadein 0.25s;\n}\n.reactist_overlay_inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n width: 100%;\n}\n.reactist_modal_box {\n display: flex;\n flex-direction: column;\n overflow: auto;\n overflow-x: hidden;\n width: 580px;\n border-radius: 3px;\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);\n}\n.reactist_modal_box.medium {\n width: 680px;\n}\n.reactist_modal_box.large {\n width: 60%;\n max-width: 1000px;\n}\n@media only screen and (max-width: 992px) {\n .reactist_modal_box.large {\n width: calc(100% - 80px);\n }\n}\n@media only screen and (max-width: 992px) {\n .reactist_modal_box {\n width: calc(100% - 80px);\n max-width: 580px;\n }\n}\n.reactist_modal_box__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n background-color: #f9f9f9;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom: 1px solid #fafafa;\n}\n.reactist_modal_box__header p {\n margin: 0 0 0 25px;\n padding: 10px 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n}\n.reactist_modal_box__header .title {\n font-size: 1rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.8;\n display: block;\n margin-top: 5px;\n}\n.reactist_modal_box__header .subtitle {\n font-size: 0.81rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.6;\n display: block;\n margin-top: 5px;\n}\n.reactist_modal_box__header a {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 46px;\n height: 46px;\n margin-left: auto;\n margin-right: 8px;\n}\n.reactist_modal_box__body {\n flex-grow: 1;\n overflow: auto;\n padding: 20px 25px 25px 25px;\n background-color: white;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_modal_box__body.plain {\n padding: 0;\n}\n.reactist_modal_box__body .dialog {\n overflow: auto;\n}\n.reactist_modal_box__body .dialog .reactist_icon {\n width: 42px;\n float: left;\n margin-right: 20px;\n}\n.reactist_modal_box__body .dialog .reactist_icon > * {\n max-height: 42px;\n max-width: 100%;\n}\n.reactist_modal_box__body .dialog .content {\n float: right;\n width: calc(100% - 62px);\n}\n.reactist_modal_box__body .dialog .content h1 {\n margin: 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n line-height: 1;\n}\n.reactist_modal_box__body:after {\n clear: both;\n content: '';\n display: block;\n}\n.reactist_modal_box__body .close {\n float: right;\n}\n.reactist_modal_box__actions {\n display: flex;\n flex-shrink: 0;\n justify-content: flex-end;\n padding: 20px 25px;\n background-color: white;\n border-top: 1px solid #ececec;\n}\n.reactist_modal_box__actions button {\n margin-left: 10px;\n}\n","",{version:3,sources:["webpack://src/components/styles/animations.less","webpack://src/components/modal/modal.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAAA;EACI;IACI,UAAA;ECCN;EDCE;IACI,UAAA;ECCN;AACF;ADEA;EACI;IACI,uBAAA;ECAN;EDEE;IACI,yBAAA;ECAN;AACF;AAXI;EACI,eAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,UAAA;EACA,aAAA;EACA,uBAAA;EACA,8BAAA;EACA,cAAA;EACA,uBAAA;AAaR;AAXQ;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;AAaZ;AATI;EACI,aAAA;EACA,sBAAA;EACA,cAAA;EACA,kBAAA;EACA,YAAA;EACA,kBAAA;EACA,+CAAA;AAWR;AATQ;EACI,YAAA;AAWZ;AARQ;EACI,UAAA;EACA,iBAAA;AAUZ;AARY;EAAA;IACI,wBAAA;EAWd;AACF;AARQ;EAAA;IACI,wBAAA;IACA,gBAAA;EAWV;AACF;AARI;EACI,aAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;EACA,2BAAA;EACA,4BAAA;EACA,gCAAA;AAUR;AAjBI;EAUQ,kBAAA;EACA,eAAA;EC3BR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADsCJ;AAzBI;ECxBA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDsCQ,cAAA;EACA,eAAA;AAeZ;AAjCI;ECRA,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED4BQ,cAAA;EACA,eAAA;AAiBZ;AAzCI;EA4BQ,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,iBAAA;AAgBZ;AAZI;EACI,YAAA;EACA,cAAA;EACA,4BAAA;EACA,uBAAA;EC1DJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADyEJ;AAfQ;EACI,UAAA;AAiBZ;AAzBI;EAYQ,cAAA;AAgBZ;AA5BI;EAeY,WAAA;EACA,WAAA;EACA,kBAAA;AAgBhB;AAdgB;EACI,gBAAA;EACA,eAAA;AAgBpB;AArCI;EA0BY,YAAA;EAEA,wBAAA;AAahB;AAzCI;EAgCgB,SAAA;ECtFhB,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDqFgB,cAAA;AAepB;AATQ;EACI,WAAA;EACA,WAAA;EACA,cAAA;AAWZ;AAtDI;EA+CQ,YAAA;AAUZ;AANI;EACI,aAAA;EACA,cAAA;EACA,yBAAA;EACA,kBAAA;EACA,uBAAA;EACA,6BAAA;AAQR;AAdI;EASQ,iBAAA;AAQZ",sourcesContent:["@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n","@import '../styles/constants.less';\n@import '../styles/animations.less';\n\n.reactist {\n &_overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n justify-content: center;\n background: rgba(0, 0, 0, 0.7);\n overflow: auto;\n animation: fadein 0.25s;\n\n &_inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n width: 100%;\n }\n }\n\n &_modal_box {\n display: flex;\n flex-direction: column;\n overflow: auto;\n overflow-x: hidden;\n width: 580px;\n border-radius: 3px;\n box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);\n\n &.medium {\n width: 680px;\n }\n\n &.large {\n width: 60%;\n max-width: 1000px;\n\n @media @small_screen {\n width: calc(~'100% - 80px'); // 40px on each side (incl. top via padding)\n }\n }\n\n @media @small_screen {\n width: calc(~'100% - 80px'); // 40px on each side (incl. top via padding)\n max-width: 580px;\n }\n }\n\n &_modal_box__header {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n background-color: @color_grey_9;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n border-bottom: 1px solid @color_grey_11;\n\n p {\n margin: 0 0 0 25px;\n padding: 10px 0;\n .normal_text(@weight: @bold);\n }\n\n .title {\n .heading_two_text();\n display: block;\n margin-top: 5px;\n }\n\n .subtitle {\n .smaller_text(@color: @secondary_font_color);\n display: block;\n margin-top: 5px;\n }\n\n a {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 46px;\n height: 46px;\n margin-left: auto;\n margin-right: 8px;\n }\n }\n\n &_modal_box__body {\n flex-grow: 1;\n overflow: auto;\n padding: 20px 25px 25px 25px;\n background-color: white;\n .normal_text();\n\n &.plain {\n padding: 0;\n }\n\n .dialog {\n overflow: auto; // contain the floating elements correctly\n\n .reactist_icon {\n width: 42px;\n float: left;\n margin-right: 20px;\n\n & > * {\n max-height: 42px;\n max-width: 100%;\n }\n }\n\n .content {\n float: right;\n // modal size minus the (icon + margin)\n width: calc(~'100% - 62px');\n\n // when used as dialog this can be used as header inside the modal body\n h1 {\n margin: 0;\n .normal_text(@weight: @bold);\n line-height: 1;\n }\n }\n }\n\n // used to clear the floating icon while still enabling scrolling\n &:after {\n clear: both;\n content: '';\n display: block;\n }\n\n .close {\n float: right;\n }\n }\n\n &_modal_box__actions {\n display: flex;\n flex-shrink: 0;\n justify-content: flex-end;\n padding: 20px 25px;\n background-color: white;\n border-top: 1px solid @color_grey_10;\n\n button {\n margin-left: 10px;\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2851:function(module,exports,__webpack_require__){var content=__webpack_require__(2852);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2852:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".notification-story-notification-dot {\n box-sizing: border-box;\n display: flex;\n width: 22px;\n padding-top: 4px;\n}\n.notification-story-notification-dot:before {\n content: '';\n display: block;\n background-color: #70bc1c;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n}\n.notification-story-notification-container {\n width: 360px;\n max-width: none;\n}\n.notification-story-content {\n margin-left: 10px;\n}\n.notification-story-text {\n text-align: left;\n margin: 0 0 4px 0;\n color: #808080;\n}\n.notification-story-heading {\n text-align: left;\n display: flex;\n justify-content: space-between;\n margin: 0;\n color: #de4c4a;\n}\n.notification-story-avatar-container {\n margin-right: 12px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/notification_story.less"],names:[],mappings:"AAEA;EACI,sBAAA;EACA,aAAA;EACA,WAAA;EACA,gBAAA;AADJ;AAGI;EACI,WAAA;EACA,cAAA;EACA,yBAAA;EACA,UAAA;EACA,WAAA;EACA,kBAAA;AADR;AAKA;EACI,YAAA;EACA,eAAA;AAHJ;AAMA;EACI,iBAAA;AAJJ;AAOA;EACI,gBAAA;EACA,iBAAA;EACA,cAAA;AALJ;AAQA;EACI,gBAAA;EACA,aAAA;EACA,8BAAA;EACA,SAAA;EACA,cAAA;AANJ;AASA;EACI,kBAAA;AAPJ",sourcesContent:["@import '../../../src/components/styles/constants.less';\n\n.notification-story-notification-dot {\n box-sizing: border-box;\n display: flex;\n width: 22px;\n padding-top: 4px;\n\n &:before {\n content: '';\n display: block;\n background-color: @color_green;\n width: 8px;\n height: 8px;\n border-radius: 8px;\n }\n}\n\n.notification-story-notification-container {\n width: 360px;\n max-width: none;\n}\n\n.notification-story-content {\n margin-left: 10px;\n}\n\n.notification-story-text {\n text-align: left;\n margin: 0 0 4px 0;\n color: @secondary_font_color;\n}\n\n.notification-story-heading {\n text-align: left;\n display: flex;\n justify-content: space-between;\n margin: 0;\n color: @color_red;\n}\n\n.notification-story-avatar-container {\n margin-right: 12px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2853:function(module,exports,__webpack_require__){var content=__webpack_require__(2854);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2854:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist-notification {\n display: flex;\n position: relative;\n font-size: 0.875rem;\n}\n.reactist-notification:not(.reactist-notification--with-button) {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid #dcdcdc;\n border-radius: 5px;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n background: #fff;\n}\n.reactist-notification__button,\n.reactist-notification__close-button {\n border: 0;\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: 300ms;\n background: #fff;\n}\n.reactist-notification__button:hover,\n.reactist-notification__close-button:hover {\n background: #ececec;\n}\n.reactist-notification__button {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid #dcdcdc;\n border-radius: 5px;\n box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n background: #fff;\n display: flex;\n flex: 1;\n}\n.reactist-notification__button:hover + .reactist-notification__close-button {\n background: #ececec;\n}\n.reactist-notification__close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n border-radius: 5px;\n}\n.reactist-notification__close-button > * {\n display: block;\n}\n.reactist-notification__icon-content-group {\n display: flex;\n flex: 1;\n}\n.reactist-notification--with-close-button .reactist-notification__icon-content-group {\n padding-right: 24px;\n}\n.reactist-notification__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.reactist-notification__title {\n margin: 0 0 3px 0;\n font-size: 0.875rem;\n text-align: left;\n}\n.reactist-notification__subtitle {\n font-size: 0.81rem;\n margin: 0;\n}\n","",{version:3,sources:["webpack://src/components/notification/notification.less"],names:[],mappings:"AAaA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;AAZJ;AAcI;EAfA,sBAAA;EACA,8BAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,2CAAA;EACA,gBAAA;AAIJ;AASA;;EAEI,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,qCAAA;EACA,0BAAA;EACA,gBAAA;AAPJ;AASI;;EACI,mBAAA;AANR;AAUA;EAnCI,sBAAA;EACA,8BAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,kBAAA;EACA,2CAAA;EACA,gBAAA;EA8BA,aAAA;EACA,OAAA;AADJ;AAGI;EACI,mBAAA;AADR;AAKA;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,kBAAA;AAHJ;AADA;EAOQ,cAAA;AAHR;AAOA;EACI,aAAA;EACA,OAAA;AALJ;AAQA;EAEQ,mBAAA;AAPR;AAWA;EACI,aAAA;EACA,sBAAA;EACA,uBAAA;AATJ;AAYA;EACI,iBAAA;EACA,mBAAA;EACA,gBAAA;AAVJ;AAaA;EACI,kBAAA;EACA,SAAA;AAXJ",sourcesContent:["@import '../styles/constants.less';\n\n.container-style() {\n box-sizing: border-box;\n justify-content: space-between;\n align-items: flex-start;\n padding: 10px 14px;\n border: 1px solid @color_border_grey;\n border-radius: @default-radius;\n box-shadow: @default-box-shadow;\n background: #fff;\n}\n\n.reactist-notification {\n display: flex;\n position: relative;\n font-size: @normal_font_size;\n\n &:not(.reactist-notification--with-button) {\n .container-style();\n }\n}\n\n.reactist-notification__button,\n.reactist-notification__close-button {\n border: 0;\n padding: 0;\n margin: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: @standard-timing;\n background: #fff;\n\n &:hover {\n background: @color_grey_10;\n }\n}\n\n.reactist-notification__button {\n .container-style();\n display: flex;\n flex: 1;\n\n &:hover + .reactist-notification__close-button {\n background: @color_grey_10;\n }\n}\n\n.reactist-notification__close-button {\n position: absolute;\n top: 8px;\n right: 8px;\n border-radius: @default-radius;\n\n > * {\n display: block;\n }\n}\n\n.reactist-notification__icon-content-group {\n display: flex;\n flex: 1;\n}\n\n.reactist-notification--with-close-button {\n .reactist-notification__icon-content-group {\n padding-right: 24px;\n }\n}\n\n.reactist-notification__content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.reactist-notification__title {\n margin: 0 0 3px 0;\n font-size: @normal_font_size;\n text-align: left;\n}\n\n.reactist-notification__subtitle {\n font-size: @smaller_font_size;\n margin: 0;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2855:function(module,exports,__webpack_require__){var content=__webpack_require__(2856);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2856:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tip {\n width: 250px;\n padding: 10px 20px;\n}\n.reactist_tip__container {\n width: 20px;\n height: 20px;\n}\n.reactist_tip--title {\n margin: 0 0 10px 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 700;\n line-height: 1.7;\n}\n.reactist_tip--message {\n margin: 0;\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n}\n","",{version:3,sources:["webpack://src/components/tip/tip.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;EAMI,YAAA;EACA,kBAAA;AANJ;AAAI;EACI,WAAA;EACA,YAAA;AAER;AAII;EACI,kBAAA;EC2BJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;AD5BJ;AACI;EACI,SAAA;ECuBJ,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrBJ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_tip {\n &__container {\n width: 20px;\n height: 20px;\n }\n\n width: 250px;\n padding: 10px 20px;\n\n &--title {\n margin: 0 0 10px 0;\n .normal_text(@weight: @bold);\n }\n &--message {\n margin: 0;\n .normal_text();\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2857:function(module,exports,__webpack_require__){var content=__webpack_require__(2858);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2858:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_progress_bar {\n margin: 10px 0;\n}\n","",{version:3,sources:["webpack://stories/components/styles/progressbar_story.less"],names:[],mappings:"AAAA;EACI,cAAA;AACJ",sourcesContent:[".reactist_progress_bar {\n margin: 10px 0;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2859:function(module,exports,__webpack_require__){var content=__webpack_require__(2860);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2860:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_progress_bar {\n height: 4px;\n border-radius: 3px;\n background-color: #ececec;\n width: 100%;\n}\n.reactist_progress_bar .inner {\n height: inherit;\n border-radius: 4px;\n background-color: #70bc1c;\n}\n","",{version:3,sources:["webpack://src/components/progress-bar/progress-bar.less"],names:[],mappings:"AAEA;EACI,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,WAAA;AADJ;AAHA;EAOQ,eAAA;EACA,kBAAA;EACA,yBAAA;AADR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_progress_bar {\n height: 4px;\n border-radius: 3px;\n background-color: @color_grey_10;\n width: 100%;\n\n .inner {\n height: inherit;\n border-radius: 4px;\n background-color: @color_green;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2861:function(module,exports,__webpack_require__){var content=__webpack_require__(2862);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2862:function(module,exports,__webpack_require__){var ___CSS_LOADER_API_IMPORT___=__webpack_require__(26),___CSS_LOADER_GET_URL_IMPORT___=__webpack_require__(968),___CSS_LOADER_URL_IMPORT_0___=__webpack_require__(2863),___CSS_LOADER_URL_IMPORT_1___=__webpack_require__(2864),___CSS_LOADER_EXPORT___=___CSS_LOADER_API_IMPORT___(!0),___CSS_LOADER_URL_REPLACEMENT_0___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___),___CSS_LOADER_URL_REPLACEMENT_1___=___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);___CSS_LOADER_EXPORT___.push([module.i,".reactist_range_input .range_btn {\n height: 30px;\n width: 30px;\n background-size: 20px;\n display: inline-block;\n background-position: center;\n background-repeat: no-repeat;\n}\n.reactist_range_input .range_btn.plus {\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_0___+");\n}\n.reactist_range_input .range_btn.minus {\n background-image: url("+___CSS_LOADER_URL_REPLACEMENT_1___+");\n}\n.reactist_range_input .range_btn:hover {\n cursor: pointer;\n}\n.reactist_range_input input[type='range'] {\n -webkit-appearance: none;\n width: 200px;\n height: 30px;\n}\n.reactist_range_input input[type='range']:focus {\n outline: none;\n}\n.reactist_range_input input[type='range']::-webkit-slider-runnable-track {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-webkit-slider-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n -webkit-appearance: none;\n margin-top: -9px;\n}\n.reactist_range_input input[type='range']:focus::-webkit-slider-runnable-track {\n background: #8d8d8d;\n}\n.reactist_range_input input[type='range']::-moz-range-track {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-moz-range-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n}\n.reactist_range_input input[type='range']::-ms-track {\n background: transparent;\n border-color: transparent;\n border-width: 20px 0;\n color: transparent;\n}\n.reactist_range_input input[type='range']::-ms-fill-lower {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #737373;\n}\n.reactist_range_input input[type='range']::-ms-fill-upper {\n width: 200px;\n height: 2px;\n cursor: pointer;\n animate: 0.2s;\n background: #808080;\n}\n.reactist_range_input input[type='range']::-ms-thumb {\n box-sizing: border-box;\n border: 1px solid #3f82ef;\n height: 20px;\n width: 20px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n}\n.reactist_range_input input[type='range']:focus::-ms-fill-lower {\n background: #808080;\n}\n.reactist_range_input input[type='range']:focus::-ms-fill-upper {\n background: #8d8d8d;\n}\n","",{version:3,sources:["webpack://src/components/range-input/range-input.less"],names:[],mappings:"AAEA;EAKQ,YAAA;EACA,WAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,4BAAA;AALR;AAMQ;EACI,yDAAA;AAJZ;AAMQ;EACI,yDAAA;AAJZ;AAMQ;EACI,eAAA;AAJZ;AAdA;EAuDQ,wBAAA;EACA,YAAA;EACA,YAAA;AAtCR;AAwCQ;EACI,aAAA;AAtCZ;AAyCQ;EAzBA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAwBI,mBAAA;AApCZ;AAuCQ;EAvBA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;EAmBI,wBAAA;EACA,gBAAA;AA/BZ;AAkCQ;EACI,mBAAA;AAhCZ;AAmCQ;EAxCA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAuCI,mBAAA;AA9BZ;AAgCQ;EArCA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AAQR;AA2BQ;EACI,uBAAA;EACA,yBAAA;EACA,oBAAA;EACA,kBAAA;AAzBZ;AA4BQ;EAvDA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EAsDI,mBAAA;AAvBZ;AAyBQ;EA3DA,YAAA;EACA,WAAA;EACA,eAAA;EACA,aAAA;EA0DI,mBAAA;AApBZ;AAsBQ;EAxDA,sBAAA;EACA,yBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,eAAA;AAqCR;AAgBQ;EACI,mBAAA;AAdZ;AAgBQ;EACI,mBAAA;AAdZ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_range_input {\n @range-height: 30px;\n @button-size: 20px;\n\n .range_btn {\n height: @range-height;\n width: @range-height;\n background-size: @button-size;\n display: inline-block;\n background-position: center;\n background-repeat: no-repeat;\n &.plus {\n background-image: url('../icons/plus.svg');\n }\n &.minus {\n background-image: url('../icons/minus.svg');\n }\n &:hover {\n cursor: pointer;\n }\n }\n\n // https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/\n @track-color: @secondary_font_color;\n @thumb-color: white;\n\n @thumb-radius: 50%;\n @thumb-height: @button-size;\n @thumb-width: @button-size;\n @thumb-border-width: 1px;\n @thumb-border-color: @primary_color;\n\n @track-width: 200px;\n @track-height: 2px;\n\n @contrast: 5%;\n\n .track() {\n width: @track-width;\n height: @track-height;\n cursor: pointer;\n animate: 0.2s;\n }\n\n .thumb() {\n box-sizing: border-box;\n border: @thumb-border-width solid @thumb-border-color;\n height: @thumb-height;\n width: @thumb-width;\n border-radius: @thumb-radius;\n background: @thumb-color;\n cursor: pointer;\n }\n\n input[type='range'] {\n -webkit-appearance: none;\n width: @track-width;\n height: @range-height;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n .track();\n background: @track-color;\n }\n\n &::-webkit-slider-thumb {\n .thumb();\n -webkit-appearance: none;\n margin-top: (@track-height / 2) - (@thumb-height / 2);\n }\n\n &:focus::-webkit-slider-runnable-track {\n background: lighten(@track-color, @contrast);\n }\n\n &::-moz-range-track {\n .track();\n background: @track-color;\n }\n &::-moz-range-thumb {\n .thumb();\n }\n\n &::-ms-track {\n background: transparent;\n border-color: transparent;\n border-width: @thumb-width 0;\n color: transparent;\n }\n\n &::-ms-fill-lower {\n .track();\n background: darken(@track-color, @contrast);\n }\n &::-ms-fill-upper {\n .track();\n background: @track-color;\n }\n &::-ms-thumb {\n .thumb();\n }\n &:focus::-ms-fill-lower {\n background: @track-color;\n }\n &:focus::-ms-fill-upper {\n background: lighten(@track-color, @contrast);\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2863:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/plus.daa8a941.svg';"},2864:function(module,exports){module.exports="data:image/svg+xml,export default __webpack_public_path__ + 'static/media/minus.c999e684.svg';"},2865:function(module,exports,__webpack_require__){var content=__webpack_require__(2866);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2866:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_select {\n font-size: 0.875rem;\n color: #202020;\n font-weight: 400;\n line-height: 1.7;\n background-color: white;\n border: 1px solid #dcdcdc;\n border-radius: 3px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n padding: 5px 25px 5px 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDggMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjgiPgogICAgPHBhdGggZD0iTTEgM2wzLTMgMyAzTTEgN2wzIDMgMy0zIi8+CiAgPC9nPgo8L3N2Zz4K');\n background-position: calc(100% - 11px) center;\n background-repeat: no-repeat;\n background-size: 8px 11px;\n}\n.reactist_select.disabled {\n background-color: #fafafa;\n}\n.reactist_select:focus {\n outline: none;\n border: 1px solid #3f82ef;\n}\n","",{version:3,sources:["webpack://src/components/select/select.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqCI,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDtCA,uBAAA;EACA,yBAAA;EACA,kBAAA;EAGA,qBAAA;EACA,wBAAA;EACA,gBAAA;EACA,SAAA;EACA,0BAAA;EACA,+XAAA;EACA,6CAAA;EACA,4BAAA;EACA,yBAAA;AAAJ;AAEI;EACI,yBAAA;AAAR;AAEI;EACI,aAAA;EACA,yBAAA;AAAR",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_select {\n .normal_text();\n background-color: white;\n border: 1px solid @color_border_grey;\n border-radius: 3px;\n\n // nuke the browser styles\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n padding: 5px 25px 5px 10px;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDggMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJub256ZXJvIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjgiPgogICAgPHBhdGggZD0iTTEgM2wzLTMgMyAzTTEgN2wzIDMgMy0zIi8+CiAgPC9nPgo8L3N2Zz4K');\n background-position: calc(~'100% - 11px') center;\n background-repeat: no-repeat;\n background-size: 8px 11px;\n\n &.disabled {\n background-color: @color_grey_11;\n }\n &:focus {\n outline: none;\n border: 1px solid @primary_color;\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2867:function(module,exports,__webpack_require__){var content=__webpack_require__(2868);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2868:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tabs__tab {\n padding: 10px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tabs_story.less"],names:[],mappings:"AAAA;EACI,aAAA;AACJ",sourcesContent:[".reactist_tabs__tab {\n padding: 10px;\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2871:function(module,exports,__webpack_require__){var content=__webpack_require__(2872);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2872:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_tabs__header {\n display: flex;\n border-bottom: 1px solid #dcdcdc;\n}\n.reactist_tabs__header--item {\n display: block;\n margin: 0 20px 0 0;\n padding: 10px 0;\n font-size: 0.875rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.7;\n text-decoration: none;\n box-sizing: border-box;\n}\n.reactist_tabs__header--item.active {\n font-size: 0.875rem;\n color: #3f82ef;\n font-weight: 400;\n line-height: 1.7;\n}\n.reactist_tabs__header--item.active:after {\n display: block;\n content: '';\n background-color: #3f82ef;\n height: 3px;\n border-radius: 3px 3px 0 0;\n position: relative;\n top: 10px;\n}\n.reactist_tabs__header--item.disabled:hover {\n cursor: not-allowed;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header {\n display: flex;\n border-bottom: 0;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item {\n text-align: center;\n flex: 1;\n border-bottom: 1px solid #dcdcdc;\n margin: 0;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item.active {\n font-size: 0.875rem;\n color: #3f82ef;\n font-weight: 400;\n line-height: 1.7;\n border-bottom: 3px solid #3f82ef;\n}\n.reactist_tabs--spreadlayout .reactist_tabs__header--item:hover {\n text-decoration: none;\n}\n","",{version:3,sources:["webpack://src/components/tabs/tabs.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAGI;EACI,aAAA;EACA,gCAAA;AAFR;AAIQ;EAGI,cAAA;EACA,kBAAA;EACA,eAAA;EC2BR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ED5BQ,qBAAA;EACA,sBAAA;AADZ;AAGY;ECsBR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADtBJ;AADgB;EACI,cAAA;EACA,WAAA;EACA,yBAAA;EACA,WAAA;EACA,0BAAA;EACA,kBAAA;EACA,SAAA;AAGpB;AAAY;EACI,mBAAA;AAEhB;AAGI;EAEQ,aAAA;EACA,gBAAA;AAFZ;AADI;EAOQ,kBAAA;EACA,OAAA;EACA,gCAAA;EACA,SAAA;AAHZ;AAKY;ECRR,mBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;EDOY,gCAAA;AAAhB;AAGY;EACI,qBAAA;AADhB",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_tabs {\n &__header {\n display: flex;\n border-bottom: 1px solid @color_border_grey;\n\n &--item {\n @item_spacing: 10px;\n\n display: block;\n margin: 0 20px 0 0;\n padding: @item_spacing 0;\n .normal_text(@color: @secondary_font_color);\n text-decoration: none;\n box-sizing: border-box;\n\n &.active {\n .normal_text(@color: @primary_color);\n &:after {\n display: block;\n content: '';\n background-color: @primary_color;\n height: 3px;\n border-radius: 3px 3px 0 0;\n position: relative;\n top: @item_spacing;\n }\n }\n &.disabled:hover {\n cursor: not-allowed;\n }\n }\n }\n\n &--spreadlayout {\n .reactist_tabs__header {\n display: flex;\n border-bottom: 0;\n }\n\n .reactist_tabs__header--item {\n text-align: center;\n flex: 1;\n border-bottom: 1px solid @color_border_grey;\n margin: 0;\n\n &.active {\n .normal_text(@color: @primary_color);\n border-bottom: 3px solid @primary_color;\n }\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2873:function(module,exports,__webpack_require__){var content=__webpack_require__(2874);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2874:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.time div span {\n display: inline-block;\n width: 160px;\n text-align: right;\n font-weight: 600;\n margin-right: 16px;\n}\n.story.time div time {\n text-align: left;\n}\n","",{version:3,sources:["webpack://stories/components/styles/time_story.less"],names:[],mappings:"AAAA;EAEQ,qBAAA;EACA,YAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;AAAR;AANA;EASQ,gBAAA;AAAR",sourcesContent:[".story.time div {\n span {\n display: inline-block;\n width: 160px;\n text-align: right;\n font-weight: 600;\n margin-right: 16px;\n }\n time {\n text-align: left;\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2875:function(module,exports,__webpack_require__){var content=__webpack_require__(2876);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2876:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".reactist_time {\n font-size: 0.75rem;\n color: #808080;\n font-weight: 400;\n line-height: 1.8;\n}\n.reactist_tooltip .reactist_time:hover {\n text-decoration: underline;\n}\n","",{version:3,sources:["webpack://src/components/time/time.less","webpack://src/components/styles/constants.less"],names:[],mappings:"AAEA;ECqDI,kBAAA;EACA,cAAA;EACA,gBAAA;EACA,gBAAA;ADrDJ;AACA;EACI,0BAAA;AACJ",sourcesContent:["@import '../styles/constants.less';\n\n.reactist_time {\n .tiny_text();\n}\n\n.reactist_tooltip .reactist_time:hover {\n text-decoration: underline;\n}\n","// Colors /////////////////////////////////////////////////////////////////////\n@primary_color: #3f82ef;\n@primary_color_lighter: #e7f3fd;\n@primary_color_darker: #3b7be2;\n@primary_font_color: #202020;\n@secondary_font_color: #808080;\n@color_grey_5: #b3b3b3;\n@color_grey_9: #f9f9f9;\n@color_grey_10: #ececec;\n@color_grey_11: #fafafa;\n@color_border_grey: #dcdcdc;\n@color_almost_black: #333333;\n@color_red: #de4c4a;\n@color_green: #70bc1c;\n\n// Typography /////////////////////////////////////////////////////////////////\n// weights\n@normal: 400;\n@semi_bold: 600;\n@bold: 700;\n\n// font sizes\n@normal_font_size: 0.875rem;\n@smaller_font_size: 0.81rem;\n@tiny_font_size: 0.75rem;\n@heading_one_font_size: 1.25rem;\n@heading_two_font_size: 1rem;\n@subheading_font_size: 0.69rem;\n\n// heading two text\n.heading_two_text(@color: @primary_font_color, @weight: @bold) {\n font-size: @heading_two_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// normal text\n.normal_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @normal_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.7;\n}\n\n// smaller text\n.smaller_text(@color: @primary_font_color, @weight: @normal) {\n font-size: @smaller_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.6;\n}\n\n// tiny text\n.tiny_text(@color: @secondary_font_color, @weight: @normal) {\n font-size: @tiny_font_size;\n color: @color;\n font-weight: @weight;\n line-height: 1.8;\n}\n\n// Border radius ////////////////////////////////////////////////////////////////////\n@default-radius: 5px;\n\n// Box shadow ////////////////////////////////////////////////////////////////////\n@default-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);\n\n// Z-Index ////////////////////////////////////////////////////////////////////\n@z-index-tooltip: 1000;\n\n// Break points ///////////////////////////////////////////////////////////////\n@small_screen: ~'only screen and (max-width: 992px)';\n\n// Transition timing ///////////////////////////////////////////////////////////////\n@standard-timing: 300ms;\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2877:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TipStory",(function(){return TipStory})),__webpack_require__.d(__webpack_exports__,"TipPlaygroundStory",(function(){return TipPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2878);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_src_components_tip__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(384);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Tip

\n \n
\n)'}},TipStory.parameters),TipPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},TipPlaygroundStory.parameters);try{TipPlaygroundStory.displayName="TipPlaygroundStory",TipPlaygroundStory.__docgenInfo={description:"",displayName:"TipPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tip.stories.tsx#TipPlaygroundStory"]={docgenInfo:TipPlaygroundStory.__docgenInfo,name:"TipPlaygroundStory",path:"stories/components/Tip.stories.tsx#TipPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2878:function(module,exports,__webpack_require__){var content=__webpack_require__(2879);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2879:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.tip .reactist_tip__container {\n margin-left: 250px;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tip_story.less"],names:[],mappings:"AAAA;EAEQ,kBAAA;AAAR",sourcesContent:[".story.tip {\n .reactist_tip__container {\n margin-left: 250px; // width of the tip\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2880:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TooltipPlaygroundStory",(function(){return TooltipPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2881);var react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_11__),_src_components_tooltip__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(2907),_src_components_button__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(16);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i {\n return (\n
\n \n \n \n \n
\n )\n}'}},TooltipPlaygroundStory.parameters);try{TooltipPlaygroundStory.displayName="TooltipPlaygroundStory",TooltipPlaygroundStory.__docgenInfo={description:"",displayName:"TooltipPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tooltip.stories.tsx#TooltipPlaygroundStory"]={docgenInfo:TooltipPlaygroundStory.__docgenInfo,name:"TooltipPlaygroundStory",path:"stories/components/Tooltip.stories.tsx#TooltipPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2881:function(module,exports,__webpack_require__){var content=__webpack_require__(2882);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2882:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".story.tooltip input,\n.story.tooltip button {\n display: block;\n text-align: center;\n}\n.story.tooltip input {\n margin: 0 auto;\n width: 400px;\n}\n.story.tooltip button {\n width: 250px;\n margin: 100px auto;\n padding: 100px 10px;\n border: 1px solid black;\n background-color: palegreen;\n}\n.story.tooltip button:hover,\n.story.tooltip button:focus {\n background-color: lightblue;\n}\n","",{version:3,sources:["webpack://stories/components/styles/tooltip_story.less"],names:[],mappings:"AAAA;;EAGQ,cAAA;EACA,kBAAA;AAAR;AAJA;EAOQ,cAAA;EACA,YAAA;AAAR;AARA;EAWQ,YAAA;EACA,kBAAA;EACA,mBAAA;EACA,uBAAA;EACA,2BAAA;AAAR;AACQ;;EAEI,2BAAA;AACZ",sourcesContent:[".story.tooltip {\n input,\n button {\n display: block;\n text-align: center;\n }\n input {\n margin: 0 auto;\n width: 400px;\n }\n button {\n width: 250px;\n margin: 100px auto;\n padding: 100px 10px;\n border: 1px solid black;\n background-color: palegreen;\n &:hover,\n &:focus {\n background-color: lightblue;\n }\n }\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2883:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Colors",(function(){return Colors}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_10__),_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(8),_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(41),_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(30),_src_new_components_box__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(144);__webpack_require__(2884);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}__webpack_exports__.default={title:"Design tokens/Colors"};var frameworkFillColors=["--reactist-framework-fill-accent","--reactist-framework-fill-aside","--reactist-framework-fill-background","--reactist-framework-fill-base","--reactist-framework-fill-crater","--reactist-framework-fill-crest","--reactist-framework-fill-elevated","--reactist-framework-fill-selected","--reactist-framework-fill-highlight","--reactist-framework-fill-ledge","--reactist-framework-fill-peak","--reactist-framework-fill-pinnacle","--reactist-framework-fill-ridge","--reactist-framework-fill-summit"],frameworkSeparatorColors=["--reactist-framework-separator"],frameworkBorderColors=["--reactist-framework-border","--reactist-framework-border-focus","--reactist-framework-border-alpha"],contentColors=["--reactist-content-primary","--reactist-content-secondary","--reactist-content-tertiary","--reactist-content-quaternary","--reactist-content-light-on-dark"],chromaticFillColors=["--reactist-chromatic-fill-red","--reactist-chromatic-fill-orange","--reactist-chromatic-fill-green","--reactist-chromatic-fill-teal","--reactist-chromatic-fill-blue","--reactist-chromatic-fill-purple","--reactist-chromatic-fill-charcoal","--reactist-chromatic-fill-grey","--reactist-chromatic-fill-midnight"],chromaticContentColors=["--reactist-chromatic-content-red","--reactist-chromatic-content-orange","--reactist-chromatic-content-green","--reactist-chromatic-content-green-background","--reactist-chromatic-content-green-background-highlight","--reactist-chromatic-content-teal","--reactist-chromatic-content-blue","--reactist-chromatic-content-purple","--reactist-chromatic-content-charcoal","--reactist-chromatic-content-grey"],chromaticHighlightColors=["--reactist-chromatic-highlight-blue","--reactist-chromatic-highlight-green","--reactist-chromatic-highlight-red"];function Swatch(_ref){var color=_ref.color;return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.b,{key:color,alignY:"center",space:"small"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.a,{width:"content"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_box__WEBPACK_IMPORTED_MODULE_14__.a,{style:{background:"var(".concat(color,")")},className:"color_swatch"})),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_columns__WEBPACK_IMPORTED_MODULE_11__.a,null,react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement("code",{className:"color_swatch__css_variable"},color)))}Swatch.displayName="Swatch";var Colors=function Colors(){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"xlarge",className:"story"},react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Framework"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Fill"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkFillColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Separator"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkSeparatorColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Framework-Border"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},frameworkBorderColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Content"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},contentColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:1,size:"larger"},"Chromatic"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Fill"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticFillColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Content"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticContentColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_heading__WEBPACK_IMPORTED_MODULE_13__.a,{level:2},"Chromatic-Highlight"),react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(_src_new_components_stack__WEBPACK_IMPORTED_MODULE_12__.a,{space:"small"},chromaticHighlightColors.map((function(color){return react__WEBPACK_IMPORTED_MODULE_10___default.a.createElement(Swatch,{color:color,key:color})}))))};Colors.displayName="Colors",Colors.parameters=function _objectSpread(target){for(var i=1;i\n \n Framework\n \n\n Framework-Fill\n \n {frameworkFillColors.map((color) => (\n \n ))}\n \n\n Framework-Separator\n \n {frameworkSeparatorColors.map((color) => (\n \n ))}\n \n\n Framework-Border\n \n {frameworkBorderColors.map((color) => (\n \n ))}\n \n\n \n Content\n \n \n {contentColors.map((color) => (\n \n ))}\n \n\n \n Chromatic\n \n\n Chromatic-Fill\n \n {chromaticFillColors.map((color) => (\n \n ))}\n \n\n Chromatic-Content\n \n {chromaticContentColors.map((color) => (\n \n ))}\n \n\n Chromatic-Highlight\n \n {chromaticHighlightColors.map((color) => (\n \n ))}\n \n \n )\n}'}},Colors.parameters)},2884:function(module,exports,__webpack_require__){var content=__webpack_require__(2885);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(27)(content,options);content.locals&&(module.exports=content.locals)},2885:function(module,exports,__webpack_require__){var ___CSS_LOADER_EXPORT___=__webpack_require__(26)(!0);___CSS_LOADER_EXPORT___.push([module.i,".color_swatch {\n width: 32px;\n height: 32px;\n border: 1px solid var(--reactist-framework-border);\n border-radius: var(--reactist-border-radius-small);\n}\n.color_swatch__css_variable {\n padding: 4px;\n border-radius: var(--reactist-border-radius-small);\n border: 1px solid var(--reactist-framework-border);\n background: var(--reactist-framework-fill-background);\n}\n","",{version:3,sources:["webpack://stories/components/styles/color-story.less"],names:[],mappings:"AAAA;EACI,WAAA;EACA,YAAA;EACA,kDAAA;EACA,kDAAA;AACJ;AAEA;EACI,YAAA;EACA,kDAAA;EACA,kDAAA;EACA,qDAAA;AAAJ",sourcesContent:[".color_swatch {\n width: 32px;\n height: 32px;\n border: 1px solid var(--reactist-framework-border);\n border-radius: var(--reactist-border-radius-small);\n}\n\n.color_swatch__css_variable {\n padding: 4px;\n border-radius: var(--reactist-border-radius-small);\n border: 1px solid var(--reactist-framework-border);\n background: var(--reactist-framework-fill-background);\n}\n"],sourceRoot:""}]),module.exports=___CSS_LOADER_EXPORT___},2886:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(2),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(57);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.c,{title:"Reactist",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"welcome"},"Welcome"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Open source React components made with ❤️ by Doist."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"how-to-use"},"How to use"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can add Reactist to your project by installing it from npm:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm install @doist/reactist"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","If you prefer to include static files grab the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://github.com/Doist/reactist/tree/develop/dist",target:"_blank",rel:"nofollow noopener noreferrer"},"minified build from the dist folder"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"A detailed explanation and examples on how to use each component can be accessed by clicking on the component name on the left."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"development"},"Development"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"First clone the repository to your local machine by running:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"git clone git@github.com:Doist/reactist.git"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","We identified two major modes of development for Reactist. First, running an interactive storybook and see the changes you make to a component in an isolated environment. This is especially helpful when developing new components. And second, improving existing components in real-life applications. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"storybook"},"Storybook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"For the first development mode run:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm run storybook"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","This boots up a development server with hot reloading on http://localhost:6006. You can iterate on the components in the existing stories or add a completely new one. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h4",{id:"inside-your-application"},"Inside your application"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"For the second development mode you can leverage",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","First run:",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("inlineCode",{parentName:"p"},"npm run start"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("br",{parentName:"p"}),"\n","this will update the build artifacts whenever you change something.\nIn your real application you need to first delete the current ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("em",{parentName:"p"},"@doist/reactist")," dependency and then link to your local one."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"cd ~/your-app\n# delete current reactist dependency\nrm -rf ./node_modules/@doist/reactist \n\n# link local reactist version\nnpm link ../reactist\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"The relative path to reactist may need to be changed to match your local environment. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"To undo the changes and switch back to the reactist version from npm do the following:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"cd ~/your-app\n# first remove linked reactist dependency\nrm -rf ./node_modules/@doist/reactist\n\n# re-install reactist from npm (-E avoids updating the version / package-lock.json) \nnpm install -E @doist/reactist\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h3",{id:"development-tips-and-tricks"},"Development tips and tricks"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Independent of the development you operate in to produce a new build (e.g. before submitting a PR) run: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run build\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"Note:")," This will ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"not")," update the docs. In case you want to update the docs you need to run:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run build-storybook\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"You can run our eslint checks with "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run check\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"It is mandatory to fix all linting errors before you make a pull request. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("strong",{parentName:"p"},"Tip:")," You can fix most of the errors automatically by running: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run check -- --fix\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("h2",{id:"testing"},"Testing"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"Tests are executed with jest or by running: "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run test\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"During development you may find it beneficial to continuously execute the tests. This works by running:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"npm run test-watch\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"This also prints the current test coverage."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"MacOS users might need to upgrade watchman with"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("code",{parentName:"pre"},"brew install watchman\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("p",null,"when experiencing troubles with the watch mode. See this issue for details: ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)("a",{parentName:"p",href:"https://github.com/facebook/jest/issues/1767",target:"_blank",rel:"nofollow noopener noreferrer"},"https://github.com/facebook/jest/issues/1767")))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};var componentMeta={title:"Reactist",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_6__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_5__.b)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},2889:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"IconStory",(function(){return Icon_stories_IconStory})),__webpack_require__.d(__webpack_exports__,"IconPlaygroundStory",(function(){return Icon_stories_IconPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),tooltip_tooltip=__webpack_require__(2907),prop_types=__webpack_require__(4),prop_types_default=__webpack_require__.n(prop_types),ThreeDotsIcon_svg_ThreeDotsIcon=function ThreeDotsIcon(_ref){var _ref$color=_ref.color,color=void 0===_ref$color?"#A5A5A5":_ref$color;return react_default.a.createElement("svg",{width:"26px",height:"26px",viewBox:"0 0 26 26"},react_default.a.createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},react_default.a.createElement("circle",{fill:color,cx:"19",cy:"13",r:"2"}),react_default.a.createElement("circle",{fill:color,cx:"13",cy:"13",r:"2"}),react_default.a.createElement("circle",{fill:color,cx:"7",cy:"13",r:"2"})))};ThreeDotsIcon_svg_ThreeDotsIcon.displayName="ThreeDotsIcon",ThreeDotsIcon_svg_ThreeDotsIcon.propTypes={color:prop_types_default.a.string};var ThreeDotsIcon_svg=ThreeDotsIcon_svg_ThreeDotsIcon;try{ThreeDotsIconsvg.displayName="ThreeDotsIconsvg",ThreeDotsIconsvg.__docgenInfo={description:"",displayName:"ThreeDotsIconsvg",props:{color:{defaultValue:{value:"#A5A5A5"},description:"",name:"color",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/icons/ThreeDotsIcon.svg.tsx#ThreeDotsIconsvg"]={docgenInfo:ThreeDotsIconsvg.__docgenInfo,name:"ThreeDotsIconsvg",path:"src/components/icons/ThreeDotsIcon.svg.tsx#ThreeDotsIconsvg"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(2791);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i void) | undefined"}},disabled:{defaultValue:{value:"false"},description:"Whether hte icon is disabled. Disabled icons can't be clicked and displayed with less opacity.",name:"disabled",required:!1,type:{name:"boolean | undefined"}},className:{defaultValue:null,description:"Additional css class that is applied to the icon",name:"className",required:!1,type:{name:"string | undefined"}},image:{defaultValue:null,description:"URL to the image that should be displayed as icon.",name:"image",required:!1,type:{name:"string | undefined"}},hoveredImage:{defaultValue:null,description:"Optional URL to the image that should be displayed when the icon is hovered.",name:"hoveredImage",required:!1,type:{name:"string | undefined"}},icon:{defaultValue:null,description:"Icon component to render, defaults to three dots.",name:"icon",required:!1,type:{name:"ReactNode"}},tooltip:{defaultValue:null,description:"Text of the tooltip of the icon.",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/icon/icon.tsx#Icon"]={docgenInfo:icon_Icon.__docgenInfo,name:"Icon",path:"src/components/icon/icon.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}var components_icon=icon_Icon,CloseIcon_svg=__webpack_require__(285);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n \n \n \n } />\n } disabled />\n \n \n \n
\n)'}},Icon_stories_IconStory.parameters),Icon_stories_IconPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Icon_stories_IconPlaygroundStory.parameters);try{Icon_stories_IconPlaygroundStory.displayName="IconPlaygroundStory",Icon_stories_IconPlaygroundStory.__docgenInfo={description:"",displayName:"IconPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Icon.stories.tsx#IconPlaygroundStory"]={docgenInfo:Icon_stories_IconPlaygroundStory.__docgenInfo,name:"IconPlaygroundStory",path:"stories/components/Icon.stories.tsx#IconPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2890:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Template",(function(){return Modal_stories_Template})),__webpack_require__.d(__webpack_exports__,"modalHeaderOnlyStory",(function(){return Modal_stories_modalHeaderOnlyStory})),__webpack_require__.d(__webpack_exports__,"modalHeaderAndBodyStory",(function(){return Modal_stories_modalHeaderAndBodyStory})),__webpack_require__.d(__webpack_exports__,"modalHeaderBodyAndActionsStory",(function(){return Modal_stories_modalHeaderBodyAndActionsStory})),__webpack_require__.d(__webpack_exports__,"modalScrollableBodyStory",(function(){return Modal_stories_modalScrollableBodyStory})),__webpack_require__.d(__webpack_exports__,"plainMediumModalStory",(function(){return Modal_stories_plainMediumModalStory})),__webpack_require__.d(__webpack_exports__,"modalPlaygroundStory",(function(){return modalPlaygroundStory}));__webpack_require__(1532),__webpack_require__(47),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(2),blocks=__webpack_require__(57),react_dom=(__webpack_require__(473),__webpack_require__(152),__webpack_require__(24),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(51)),react_dom_default=__webpack_require__.n(react_dom),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),CloseIcon_svg=__webpack_require__(285);__webpack_require__(2849);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Header"]={docgenInfo:Modal.Header.__docgenInfo,name:"Modal.Header",path:"src/components/modal/modal.tsx#Modal.Header"})}catch(__react_docgen_typescript_loader_error){}try{Modal.Body.displayName="Modal.Body",Modal.Body.__docgenInfo={description:"",displayName:"Modal.Body",props:{icon:{defaultValue:null,description:"Display an icon (or basically any component) on the right hand side of the Modal.Body.",name:"icon",required:!1,type:{name:"ReactNode"}},plain:{defaultValue:null,description:"Applies less styles on the body (e.g. no padding)",name:"plain",required:!1,type:{name:"boolean | undefined"}},style:{defaultValue:null,description:"Sometimes a class name is not enough so you can use this to set the style directly.",name:"style",required:!1,type:{name:"CSSProperties | undefined"}},className:{defaultValue:null,description:"Additionall css class applied to the Modal.Body.",name:"className",required:!1,type:{name:"string | undefined"}},showCloseIcon:{defaultValue:{value:"false"},description:"Render a close icon in the top right corner of the Modal.Body.\nRecommended to use when no Modal.Header is used.",name:"showCloseIcon",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Body"]={docgenInfo:Modal.Body.__docgenInfo,name:"Modal.Body",path:"src/components/modal/modal.tsx#Modal.Body"})}catch(__react_docgen_typescript_loader_error){}try{Modal.Actions.displayName="Modal.Actions",Modal.Actions.__docgenInfo={description:"",displayName:"Modal.Actions",props:{children:{defaultValue:null,description:"Children to render inside the Modal.Actions. They can have an optional `close` property (boolean).\nWhen that is supplied and set to true it will close the modal after the onClick function",name:"children",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/modal/modal.tsx#Modal.Actions"]={docgenInfo:Modal.Actions.__docgenInfo,name:"Modal.Actions",path:"src/components/modal/modal.tsx#Modal.Actions"})}catch(__react_docgen_typescript_loader_error){}var components_modal={Box:modal_Box,Header:modal_Header,Body:modal_Body,Actions:modal_Actions},components_button=(__webpack_require__(2847),__webpack_require__(16));function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Modal_stories_Template=function Template(_ref){_ref.data;var args=_objectWithoutProperties(_ref,["data"]);return Object(esm.b)(ModalStoryHelper_ModalPlaygroundStory,Modal_stories_extends({},args,{mdxType:"ModalPlaygroundStory"}))};Modal_stories_Template.displayName="Template";var layoutProps={Template:Modal_stories_Template};function MDXContent(_ref2){var components=_ref2.components,props=_objectWithoutProperties(_ref2,["components"]);return Object(esm.b)("wrapper",Modal_stories_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.c,{title:"Components/Modal",component:components_modal,mdxType:"Meta"}),Object(esm.b)("h1",{id:"component-documentation"},"Component Documentation"),Object(esm.b)("h3",{id:"how-to-use"},"How to use"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal")," component consist of four subcomponents ",Object(esm.b)("em",{parentName:"p"},"Box, Header, Body, Actions")," which are exported as keys of the Modal object. Hence, to use a Modal your code should look like this:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},"import { Modal } from 'reactist';\n...\n<Modal.Box>\n <Modal.Header>...</Modal.Header>\n <Modal.Body>...</Modal.Body>\n <Modal.Actions>...</Modal.Actions>\n</Modal.Box>\n")),Object(esm.b)("p",null,"The Modal is always attached to an element with the id ",Object(esm.b)("strong",{parentName:"p"},"modal_box"),". You need to add this somewhere in your component hierarchy in order for the Modal to work correctly. It is sufficient to add this once near the top of your component hierarchy."),Object(esm.b)("h3",{id:"modal-box"},"Modal Box"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Box")," component simply acts as a container for the Modal and is responsible for rendering the dark overlay and all children components. You can pass it an optional ",Object(esm.b)("em",{parentName:"p"},"className")," property to apply additional styles."),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Box")," accepts an optional property ",Object(esm.b)("em",{parentName:"p"},"closeOnOverlayClick")," when set to ",Object(esm.b)("strong",{parentName:"p"},"true")," a click on the overlay will close the modal. Defaults to ",Object(esm.b)("strong",{parentName:"p"},"false"),"."),Object(esm.b)("h3",{id:"modal-header"},"Modal Header"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Header")," component shows the Header of the Modal. It always show a close icon on the right side to close the Modal. It can display arbitrary content you pass to it as children. However, the recommended usage pattern is to supply the ",Object(esm.b)("em",{parentName:"p"},"title")," and ",Object(esm.b)("em",{parentName:"p"},"subtitle")," (string) properties. This displays nicely formatted headings inside the Header."),Object(esm.b)("p",null,"Nevertheless, the ",Object(esm.b)("strong",{parentName:"p"},"Modal.Header")," will look the same whether you go for option 1 or option 2:"),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},"// Option 1\nA Fancy Title;\n\n// Option 2\n;\n")),Object(esm.b)("h3",{id:"modal-body"},"Modal Body"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"In the simplest case the ",Object(esm.b)("strong",{parentName:"p"},"Modal.Body")," just wraps all its children. However, it can be used to implement a more complex Dialog (i.e. if you do not want to render a Header). You can specify the ",Object(esm.b)("em",{parentName:"p"},"icon")," property (any node, e.g. an ",Object(esm.b)("em",{parentName:"p"},"<","img /",">")," or your custom ",Object(esm.b)("em",{parentName:"p"},"<","Icon /",">")," component) which will be displayed on the left side of the Dialog's Body. When you set the ",Object(esm.b)("em",{parentName:"p"},"showCloseIcon")," property to ",Object(esm.b)("strong",{parentName:"p"},"true")," the Body will display a close icon to dismiss the Dialog again. This should only be used when no Header is used."),Object(esm.b)("h3",{id:"modal-actions"},"Modal Actions"),Object(esm.b)("hr",null),Object(esm.b)("p",null,"The ",Object(esm.b)("strong",{parentName:"p"},"Modal.Actions")," displays an action bar on the bottom of the Modal. It works best with the Reactist Buttons. If you set the ",Object(esm.b)("em",{parentName:"p"},"close")," property to ",Object(esm.b)("strong",{parentName:"p"},"true")," on any of the supplied children it's ",Object(esm.b)("em",{parentName:"p"},"onClick")," function will close the modal."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre"},'\n \n\n')),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderOnlyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderOnlyStory,{mdxType:"ModalHeaderOnlyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderAndBodyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderAndBodyStory,{mdxType:"ModalHeaderAndBodyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalHeaderBodyAndActionsStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalHeaderBodyAndActionsStory,{mdxType:"ModalHeaderBodyAndActionsStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalScrollableBodyStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_ModalScrollableBodyStory,{mdxType:"ModalScrollableBodyStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"PlainMediumModalStory",mdxType:"Story"},Object(esm.b)(ModalStoryHelper_PlainMediumModalStory,{mdxType:"PlainMediumModalStory"}))),Object(esm.b)(blocks.b,{mdxType:"Canvas"},Object(esm.b)(blocks.d,{name:"ModalPlaygroundStory",args:{plain:!1,showCloseIcon:!1,medium:!1,large:!1,title:"Header of Modal",subtitle:"This is a smaller description"},mdxType:"Story"},Modal_stories_Template.bind({}))))}MDXContent.displayName="MDXContent",MDXContent.isMDXComponent=!0;var Modal_stories_modalHeaderOnlyStory=function modalHeaderOnlyStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderOnlyStory,null)};Modal_stories_modalHeaderOnlyStory.displayName="modalHeaderOnlyStory",Modal_stories_modalHeaderOnlyStory.storyName="ModalHeaderOnlyStory",Modal_stories_modalHeaderOnlyStory.parameters={storySource:{source:""}};var Modal_stories_modalHeaderAndBodyStory=function modalHeaderAndBodyStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderAndBodyStory,null)};Modal_stories_modalHeaderAndBodyStory.displayName="modalHeaderAndBodyStory",Modal_stories_modalHeaderAndBodyStory.storyName="ModalHeaderAndBodyStory",Modal_stories_modalHeaderAndBodyStory.parameters={storySource:{source:""}};var Modal_stories_modalHeaderBodyAndActionsStory=function modalHeaderBodyAndActionsStory(){return Object(esm.b)(ModalStoryHelper_ModalHeaderBodyAndActionsStory,null)};Modal_stories_modalHeaderBodyAndActionsStory.displayName="modalHeaderBodyAndActionsStory",Modal_stories_modalHeaderBodyAndActionsStory.storyName="ModalHeaderBodyAndActionsStory",Modal_stories_modalHeaderBodyAndActionsStory.parameters={storySource:{source:""}};var Modal_stories_modalScrollableBodyStory=function modalScrollableBodyStory(){return Object(esm.b)(ModalStoryHelper_ModalScrollableBodyStory,null)};Modal_stories_modalScrollableBodyStory.displayName="modalScrollableBodyStory",Modal_stories_modalScrollableBodyStory.storyName="ModalScrollableBodyStory",Modal_stories_modalScrollableBodyStory.parameters={storySource:{source:""}};var Modal_stories_plainMediumModalStory=function plainMediumModalStory(){return Object(esm.b)(ModalStoryHelper_PlainMediumModalStory,null)};Modal_stories_plainMediumModalStory.displayName="plainMediumModalStory",Modal_stories_plainMediumModalStory.storyName="PlainMediumModalStory",Modal_stories_plainMediumModalStory.parameters={storySource:{source:""}};var modalPlaygroundStory=Modal_stories_Template.bind({});modalPlaygroundStory.storyName="ModalPlaygroundStory",modalPlaygroundStory.args={plain:!1,showCloseIcon:!1,medium:!1,large:!1,title:"Header of Modal",subtitle:"This is a smaller description"},modalPlaygroundStory.parameters={storySource:{source:"({\n data,\n ...args\n}) => "}};var componentMeta={title:"Components/Modal",component:components_modal,includeStories:["modalHeaderOnlyStory","modalHeaderAndBodyStory","modalHeaderBodyAndActionsStory","modalScrollableBodyStory","plainMediumModalStory","modalPlaygroundStory"]},mdxStoryNameToKey={ModalHeaderOnlyStory:"modalHeaderOnlyStory",ModalHeaderAndBodyStory:"modalHeaderAndBodyStory",ModalHeaderBodyAndActionsStory:"modalHeaderBodyAndActionsStory",ModalScrollableBodyStory:"modalScrollableBodyStory",PlainMediumModalStory:"plainMediumModalStory",ModalPlaygroundStory:"modalPlaygroundStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object.assign({},componentMeta.parameters.docs||{},{page:function page(){return Object(esm.b)(blocks.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))}});__webpack_exports__.default=componentMeta},2891:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"NoHoverEffectStory",(function(){return Time_stories_NoHoverEffectStory})),__webpack_require__.d(__webpack_exports__,"ExpandTimeStory",(function(){return Time_stories_ExpandTimeStory})),__webpack_require__.d(__webpack_exports__,"FullyExpandTimeStory",(function(){return Time_stories_FullyExpandTimeStory})),__webpack_require__.d(__webpack_exports__,"TooltipTimeStory",(function(){return Time_stories_TooltipTimeStory})),__webpack_require__.d(__webpack_exports__,"TranslatedTimeStory",(function(){return Time_stories_TranslatedTimeStory})),__webpack_require__.d(__webpack_exports__,"TimePlaygroundStory",(function(){return Time_stories_TimePlaygroundStory}));__webpack_require__(152),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2873);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),dayjs_min=__webpack_require__(126),dayjs_min_default=__webpack_require__.n(dayjs_min),tooltip=(__webpack_require__(656),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(2907)),localizedFormat=(__webpack_require__(473),__webpack_require__(1568)),localizedFormat_default=__webpack_require__.n(localizedFormat);dayjs_min_default.a.extend(localizedFormat_default.a);var TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo:function timeAgo(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale=config.locale,locale=void 0===_config$locale?"en":_config$locale,_config$shortFormatCu=config.shortFormatCurrentYear,shortFormatCurrentYear=void 0===_config$shortFormatCu?this.SHORT_FORMAT_CURRENT_YEAR:_config$shortFormatCu,_config$shortFormatPa=config.shortFormatPastYear,shortFormatPastYear=void 0===_config$shortFormatPa?this.SHORT_FORMAT_PAST_YEAR:_config$shortFormatPa,_config$daysSuffix=config.daysSuffix,daysSuffix=void 0===_config$daysSuffix?"d":_config$daysSuffix,_config$hoursSuffix=config.hoursSuffix,hoursSuffix=void 0===_config$hoursSuffix?"h":_config$hoursSuffix,_config$minutesSuffix=config.minutesSuffix,minutesSuffix=void 0===_config$minutesSuffix?"m":_config$minutesSuffix,_config$momentsAgo=config.momentsAgo,momentsAgo=void 0===_config$momentsAgo?"moments ago":_config$momentsAgo,now=dayjs_min_default()(),date=dayjs_min_default()(1e3*timestamp);date.locale(locale);var diffMinutes=now.diff(date,"minute"),diffHours=now.diff(date,"hour"),diffDays=now.diff(date,"day");return diffDays>1?date.isSame(now,"year")?date.format(shortFormatCurrentYear):date.format(shortFormatPastYear):1===diffDays?"".concat(diffDays).concat(daysSuffix):diffHours>0&&diffHours<=23?"".concat(diffHours).concat(hoursSuffix):diffMinutes>0&&diffMinutes<=59?"".concat(diffMinutes).concat(minutesSuffix):momentsAgo},formatTime:function formatTime(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale2=config.locale,locale=void 0===_config$locale2?"en":_config$locale2,_config$shortFormatCu2=config.shortFormatCurrentYear,shortFormatCurrentYear=void 0===_config$shortFormatCu2?this.SHORT_FORMAT_CURRENT_YEAR:_config$shortFormatCu2,_config$shortFormatPa2=config.shortFormatPastYear,shortFormatPastYear=void 0===_config$shortFormatPa2?this.SHORT_FORMAT_PAST_YEAR:_config$shortFormatPa2,date=dayjs_min_default()(1e3*timestamp);return date.locale(locale),date.isSame(dayjs_min_default()(),"year")?date.format(shortFormatCurrentYear):date.format(shortFormatPastYear)},formatTimeLong:function formatTimeLong(timestamp){var config=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},_config$locale3=config.locale,locale=void 0===_config$locale3?"en":_config$locale3,_config$longFormat=config.longFormat,longFormat=void 0===_config$longFormat?this.LONG_FORMAT:_config$longFormat,date=dayjs_min_default()(1e3*timestamp);return date.locale(locale),date.format(longFormat)}};__webpack_require__(2875);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i (\n
\n

Normal Time (no hover effect)

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_NoHoverEffectStory.parameters),Time_stories_ExpandTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Expanding time on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_ExpandTimeStory.parameters),Time_stories_FullyExpandTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Fully expanding time on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_FullyExpandTimeStory.parameters),Time_stories_TooltipTimeStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n

Show full time in tooltip on hover

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n)'}},Time_stories_TooltipTimeStory.parameters),Time_stories_TranslatedTimeStory.parameters=_objectSpread({storySource:{source:"() => {\n const i18nConfig = {\n locale: 'de',\n hoursSuffix: 'Std',\n minutesSuffix: 'min',\n momentsAgo: 'Gerade eben',\n }\n\n return (\n
\n

Translated times

\n {exampleTimes.map((time, index) => (\n
\n {time.title}\n
\n ))}\n
\n )\n}"}},Time_stories_TranslatedTimeStory.parameters),Time_stories_TimePlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n
\n)'}},Time_stories_TimePlaygroundStory.parameters);try{Time_stories_TimePlaygroundStory.displayName="TimePlaygroundStory",Time_stories_TimePlaygroundStory.__docgenInfo={description:"",displayName:"TimePlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Time.stories.tsx#TimePlaygroundStory"]={docgenInfo:Time_stories_TimePlaygroundStory.__docgenInfo,name:"TimePlaygroundStory",path:"stories/components/Time.stories.tsx#TimePlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2892:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,"decorators",(function(){return decorators})),__webpack_require__.d(preview_namespaceObject,"parameters",(function(){return parameters}));__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(24);var client_api=__webpack_require__(2930),esm=__webpack_require__(9),decorators=(__webpack_require__(0),__webpack_require__(2601),[function(Story){return Story()}]),parameters={options:{storySort:{method:"alphabetical",order:["Reactist","Design tokens","Design system","Components"]}},decorators:decorators};function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":case"argTypes":return esm.a.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify(value));case"decorators":return value.forEach((function(decorator){return Object(client_api.b)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(client_api.c)(loader,!1)}));case"parameters":return Object(client_api.d)(function _objectSpread(target){for(var i=1;i void) | undefined"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string | number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/checkbox/checkbox.tsx#Checkbox"]={docgenInfo:Checkbox.__docgenInfo,name:"Checkbox",path:"src/components/checkbox/checkbox.tsx#Checkbox"})}catch(__react_docgen_typescript_loader_error){}var components_checkbox=Checkbox;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [checked, setChecked] = useState(false)\n\n const handleCheck = () => {\n setChecked((prev: boolean) => !prev)\n }\n\n return (\n
\n

Checkbox

\n \n
\n )\n}'}},Checkbox_stories_CheckboxStory.parameters),Checkbox_stories_CheckboxPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const [checked, setChecked] = useState(false)\n\n const handleCheck = () => {\n setChecked((prev: boolean) => !prev)\n }\n return (\n
\n \n
\n )\n}'}},Checkbox_stories_CheckboxPlaygroundStory.parameters);try{Checkbox_stories_CheckboxPlaygroundStory.displayName="CheckboxPlaygroundStory",Checkbox_stories_CheckboxPlaygroundStory.__docgenInfo={description:"",displayName:"CheckboxPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Checkbox.stories.tsx#CheckboxPlaygroundStory"]={docgenInfo:Checkbox_stories_CheckboxPlaygroundStory.__docgenInfo,name:"CheckboxPlaygroundStory",path:"stories/components/Checkbox.stories.tsx#CheckboxPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2894:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ColorPickersStory",(function(){return ColorPicker_stories_ColorPickersStory})),__webpack_require__.d(__webpack_exports__,"CustomColorPickersStory",(function(){return ColorPicker_stories_CustomColorPickersStory})),__webpack_require__.d(__webpack_exports__,"NamedColorPickersStory",(function(){return ColorPicker_stories_NamedColorPickersStory})),__webpack_require__.d(__webpack_exports__,"SmallColorPickerStory",(function(){return ColorPicker_stories_SmallColorPickerStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(2780),__webpack_require__(1454),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),dropdown=__webpack_require__(115),tooltip_tooltip=__webpack_require__(2907),COLORS=(__webpack_require__(2783),["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"]),_isNamedColor=function _isNamedColor(color){return"string"!=typeof color};function ColorPicker(_ref){var backgroundColor,_ref$color=_ref.color,color=void 0===_ref$color?0:_ref$color,small=_ref.small,onChange=_ref.onChange,_ref$colorList=_ref.colorList,colorList=void 0===_ref$colorList?COLORS:_ref$colorList;return react_default.a.createElement(dropdown.a.Box,{right:!0,className:"reactist_color_picker"},react_default.a.createElement(dropdown.a.Trigger,null,(backgroundColor=function _getColor(colorList,colorIndex){return colorList[colorIndex>=colorList.length?0:colorIndex]}(colorList,color),react_default.a.createElement("span",{className:classnames_default()("color_trigger",{small:small}),style:{backgroundColor:_isNamedColor(backgroundColor)?backgroundColor.color:backgroundColor}},react_default.a.createElement("span",{className:"color_trigger--inner_ring"})))),react_default.a.createElement(dropdown.a.Body,null,react_default.a.createElement("div",{className:"color_options"},colorList.reduce((function(items,currentColor,currentIndex){return items.push(react_default.a.createElement(ColorItem,{isActive:color>=colorList.length?0===currentIndex:currentIndex===color,key:currentIndex,color:_isNamedColor(currentColor)?currentColor.color:currentColor,colorIndex:currentIndex,onClick:onChange,tooltip:_isNamedColor(currentColor)?currentColor.name:null})),items}),[]))))}function ColorItem(_ref2){var color=_ref2.color,colorIndex=_ref2.colorIndex,isActive=_ref2.isActive,_onClick=_ref2.onClick,tooltip=_ref2.tooltip,item=react_default.a.createElement("span",{className:"reactist color_item"+(isActive?" active":""),style:{backgroundColor:color},onClick:function onClick(){return _onClick&&_onClick(colorIndex)}},react_default.a.createElement("span",{className:"color_item--inner_ring"}));return tooltip?react_default.a.createElement(tooltip_tooltip.a,{content:tooltip},item):item}ColorPicker.displayName="ColorPicker",ColorPicker.displayName="ColorPicker",ColorItem.displayName="ColorItem";try{ColorPicker.displayName="ColorPicker",ColorPicker.__docgenInfo={description:"",displayName:"ColorPicker",props:{small:{defaultValue:null,description:"",name:"small",required:!1,type:{name:"boolean | undefined"}},color:{defaultValue:{value:"0"},description:"",name:"color",required:!1,type:{name:"number | undefined"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((color: number) => void) | undefined"}},colorList:{defaultValue:null,description:"",name:"colorList",required:!1,type:{name:"(string | NamedColor)[] | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/color-picker/color-picker.tsx#ColorPicker"]={docgenInfo:ColorPicker.__docgenInfo,name:"ColorPicker",path:"src/components/color-picker/color-picker.tsx#ColorPicker"})}catch(__react_docgen_typescript_loader_error){}try{ColorItem.displayName="ColorItem",ColorItem.__docgenInfo={description:"",displayName:"ColorItem",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}},colorIndex:{defaultValue:null,description:"",name:"colorIndex",required:!0,type:{name:"number"}},isActive:{defaultValue:null,description:"",name:"isActive",required:!1,type:{name:"boolean | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"((colorIndex: number) => void) | undefined"}},tooltip:{defaultValue:null,description:"",name:"tooltip",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/color-picker/color-picker.tsx#ColorItem"]={docgenInfo:ColorItem.__docgenInfo,name:"ColorItem",path:"src/components/color-picker/color-picker.tsx#ColorItem"})}catch(__react_docgen_typescript_loader_error){}var components_color_picker=ColorPicker;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Color Picker

\n \n
\n )\n}'}},ColorPicker_stories_ColorPickersStory.parameters),ColorPicker_stories_CustomColorPickersStory.parameters=_objectSpread({storySource:{source:"() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Custom Colors Color Picker

\n \n
\n )\n}"}},ColorPicker_stories_CustomColorPickersStory.parameters),ColorPicker_stories_NamedColorPickersStory.parameters=_objectSpread({storySource:{source:"() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Named Colors Color Picker

\n \n
\n )\n}"}},ColorPicker_stories_NamedColorPickersStory.parameters),ColorPicker_stories_SmallColorPickerStory.parameters=_objectSpread({storySource:{source:'() => {\n const [color, setColor] = useState(0)\n\n const handleChange = (color) => {\n setColor(color)\n }\n\n return (\n
\n

Small Color Picker

\n \n
\n )\n}'}},ColorPicker_stories_SmallColorPickerStory.parameters)},2895:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ErrorMessageStory",(function(){return ErrorMessage_stories_ErrorMessageStory})),__webpack_require__.d(__webpack_exports__,"ErrorMessagePlaygroundStory",(function(){return ErrorMessage_stories_ErrorMessagePlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react);__webpack_require__(656),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(2788);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i0}},{key:"render",value:function render(){var message=this.props.message;return!(!this.state.visible||!this._isValidMessage(message))&&react_default.a.createElement("div",{className:"reactist_error_message"},react_default.a.createElement("p",null,message),react_default.a.createElement("div",{onClick:this._hide,className:"dismiss_icon"}))}}]),ErrorMessage}(react_default.a.Component);_defineProperty(error_message_ErrorMessage,"displayName",void 0),_defineProperty(error_message_ErrorMessage,"defaultProps",void 0),error_message_ErrorMessage.displayName="ErrorMessage",error_message_ErrorMessage.defaultProps={timeout:2500};try{error_message_ErrorMessage.displayName="ErrorMessage",error_message_ErrorMessage.__docgenInfo={description:"",displayName:"ErrorMessage",props:{timeout:{defaultValue:{value:"2500"},description:"",name:"timeout",required:!1,type:{name:"number | undefined"}},onHide:{defaultValue:null,description:"",name:"onHide",required:!1,type:{name:"(() => void) | undefined"}},message:{defaultValue:null,description:"",name:"message",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/error-message/error-message.tsx#ErrorMessage"]={docgenInfo:error_message_ErrorMessage.__docgenInfo,name:"ErrorMessage",path:"src/components/error-message/error-message.tsx#ErrorMessage"})}catch(__react_docgen_typescript_loader_error){}var components_error_message=error_message_ErrorMessage;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n \n
\n)'}},ErrorMessage_stories_ErrorMessageStory.parameters),ErrorMessage_stories_ErrorMessagePlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},ErrorMessage_stories_ErrorMessagePlaygroundStory.parameters);try{ErrorMessage_stories_ErrorMessagePlaygroundStory.displayName="ErrorMessagePlaygroundStory",ErrorMessage_stories_ErrorMessagePlaygroundStory.__docgenInfo={description:"",displayName:"ErrorMessagePlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/ErrorMessage.stories.tsx#ErrorMessagePlaygroundStory"]={docgenInfo:ErrorMessage_stories_ErrorMessagePlaygroundStory.__docgenInfo,name:"ErrorMessagePlaygroundStory",path:"stories/components/ErrorMessage.stories.tsx#ErrorMessagePlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2896:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InputStory",(function(){return Input_stories_InputStory})),__webpack_require__.d(__webpack_exports__,"InputPlaygroundStory",(function(){return Input_stories_InputPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(47),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2795);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i void) | RefObject | null | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/input/input.tsx#Input"]={docgenInfo:Input.__docgenInfo,name:"Input",path:"src/components/input/input.tsx#Input"})}catch(__react_docgen_typescript_loader_error){}var components_input=Input;__webpack_require__(2793);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i")," element which justs add a class name to give it is unique style. All properties you pass to it (e.g. *value* or *onChange*) are directly applied onto the underlying ",react_default.a.createElement("code",null,"")," element.")),react_default.a.createElement(components_input,{placeholder:"Simple input wrapper"}))};Input_stories_InputStory.displayName="InputStory";var Input_stories_InputPlaygroundStory=function InputPlaygroundStory(args){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(components_input,args))};Input_stories_InputPlaygroundStory.displayName="InputPlaygroundStory",Input_stories_InputPlaygroundStory.args={placeholder:"Simple input wrapper",disabled:!1},Input_stories_InputPlaygroundStory.argTypes={placeholder:{control:{type:"text"}},disabled:{control:{type:"boolean"}},className:{control:{type:null}}},Input_stories_InputStory.parameters=_objectSpread({storySource:{source:'() => (\n
\n
\n

\n This component is a dumb wrapper around the\n <input /> element which justs add a class name to give it is\n unique style. All properties you pass to it (e.g. *value* or *onChange*) are\n directly applied onto the underlying <input /> element.\n

\n
\n \n
\n)'}},Input_stories_InputStory.parameters),Input_stories_InputPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Input_stories_InputPlaygroundStory.parameters);try{Input_stories_InputPlaygroundStory.displayName="InputPlaygroundStory",Input_stories_InputPlaygroundStory.__docgenInfo={description:"",displayName:"InputPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Input.stories.tsx#InputPlaygroundStory"]={docgenInfo:Input_stories_InputPlaygroundStory.__docgenInfo,name:"InputPlaygroundStory",path:"stories/components/Input.stories.tsx#InputPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2897:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"LoadingStory",(function(){return Loading_stories_LoadingStory})),__webpack_require__.d(__webpack_exports__,"LoadingPlaygroundStory",(function(){return Loading_stories_LoadingPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2806);function Loading(_ref){var className=_ref.className,_ref$spinnerColor=_ref.spinnerColor,spinnerColor=void 0===_ref$spinnerColor?"#3F82EF":_ref$spinnerColor,_ref$bgColor=_ref.bgColor,bgColor=void 0===_ref$bgColor?"#D9E6FB":_ref$bgColor,_ref$size=_ref.size,size=void 0===_ref$size?24:_ref$size,_ref$ariaLabel=_ref["aria-label"],ariaLabel=void 0===_ref$ariaLabel?"Loading":_ref$ariaLabel;return react_default.a.createElement("div",{className:classnames_default()("reactist_loading",className),"aria-label":ariaLabel,"aria-live":"assertive",role:"alert"},react_default.a.createElement("span",{className:"reactist_loading--spinner"},react_default.a.createElement("svg",{width:size,height:size,viewBox:"0 0 24 24"},react_default.a.createElement("g",{fill:"none",fillRule:"nonzero"},react_default.a.createElement("path",{fill:spinnerColor,d:"M17.945 3.958A9.955 9.955 0 0 0 12 2c-2.19 0-4.217.705-5.865 1.9L5.131 2.16A11.945 11.945 0 0 1 12 0c2.59 0 4.99.82 6.95 2.217l-1.005 1.741z"}),react_default.a.createElement("path",{fill:bgColor,d:"M5.13 2.16L6.136 3.9A9.987 9.987 0 0 0 2 12c0 5.523 4.477 10 10 10s10-4.477 10-10a9.986 9.986 0 0 0-4.055-8.042l1.006-1.741A11.985 11.985 0 0 1 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12c0-4.073 2.029-7.671 5.13-9.84z"})))))}Loading.displayName="Loading",Loading.displayName="Loading";try{Loading.displayName="Loading",Loading.__docgenInfo={description:"",displayName:"Loading",props:{className:{defaultValue:null,description:"Additional css class that is applied to Loading.",name:"className",required:!1,type:{name:"string | undefined"}},spinnerColor:{defaultValue:{value:"#3F82EF"},description:"Hex code of the spinner color.",name:"spinnerColor",required:!1,type:{name:"string | undefined"}},bgColor:{defaultValue:{value:"#D9E6FB"},description:"Hex code of the background color.",name:"bgColor",required:!1,type:{name:"string | undefined"}},size:{defaultValue:{value:"24"},description:"Circle diameter in pixels.",name:"size",required:!1,type:{name:"string | number | undefined"}},"aria-label":{defaultValue:null,description:"",name:"aria-label",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/loading/loading.tsx#Loading"]={docgenInfo:Loading.__docgenInfo,name:"Loading",path:"src/components/loading/loading.tsx#Loading"})}catch(__react_docgen_typescript_loader_error){}var components_loading=Loading;__webpack_require__(2804);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Loading

\n \n
\n)'}},Loading_stories_LoadingStory.parameters),Loading_stories_LoadingPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},Loading_stories_LoadingPlaygroundStory.parameters);try{Loading_stories_LoadingPlaygroundStory.displayName="LoadingPlaygroundStory",Loading_stories_LoadingPlaygroundStory.__docgenInfo={description:"",displayName:"LoadingPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Loading.stories.tsx#LoadingPlaygroundStory"]={docgenInfo:Loading_stories_LoadingPlaygroundStory.__docgenInfo,name:"LoadingPlaygroundStory",path:"stories/components/Loading.stories.tsx#LoadingPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2898:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"SimpleMenuExample",(function(){return Menu_stories_SimpleMenuExample})),__webpack_require__.d(__webpack_exports__,"OverflowMenuExample",(function(){return Menu_stories_OverflowMenuExample}));__webpack_require__(244),__webpack_require__(473),__webpack_require__(152),__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2808);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),classnames=(__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);function forwardRefWithAs(render){return react.forwardRef(render)}var MenuState=__webpack_require__(2929),Menu_MenuButton=__webpack_require__(2928),Menu=__webpack_require__(2926),Menu_MenuItem=__webpack_require__(2927),MenuGroup=__webpack_require__(2925),PopoverBackdrop=__webpack_require__(2931);__webpack_require__(2845);function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(arr)))return;var _arr=[],_n=!0,_d=!1,_e=void 0;try{for(var _s,_i=arr[Symbol.iterator]();!(_n=(_s=_i.next()).done)&&(_arr.push(_s.value),!i||_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{_n||null==_i.return||_i.return()}finally{if(_d)throw _e}}return _arr}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var MenuContext=react.createContext({});function menu_Menu(_ref){var children=_ref.children,onItemSelect=_ref.onItemSelect,props=_objectWithoutProperties(_ref,["children","onItemSelect"]),state=MenuState.a(_objectSpread({loop:!0},props)),handleItemSelect=react.useCallback((function handleItemSelect(value){onItemSelect&&onItemSelect(value)}),[onItemSelect]),value=react.useMemo((function(){return _objectSpread(_objectSpread({},state),{},{handleItemSelect:handleItemSelect})}),[state,handleItemSelect]);return react.createElement(MenuContext.Provider,{value:value},children)}menu_Menu.displayName="Menu";var menu_MenuButton=forwardRefWithAs((function MenuButton(_ref2,ref){var className=_ref2.className,props=_objectWithoutProperties(_ref2,["className"]),_React$useContext=react.useContext(MenuContext),state=(_React$useContext.handleItemSelect,_objectWithoutProperties(_React$useContext,["handleItemSelect"]));return react.createElement(Menu_MenuButton.a,_extends({},props,state,{ref:ref,className:classnames_default()("reactist_menubutton",className)}))})),BACKDROP_STYLE={width:"100%",height:"100%",position:"fixed",top:0,left:0};function MenuBackdrop(_ref3){var baseId=_ref3.baseId,visible=_ref3.visible,animated=_ref3.animated,animating=_ref3.animating,stopAnimation=_ref3.stopAnimation,modal=_ref3.modal,children=_ref3.children;return react.createElement(PopoverBackdrop.a,{baseId:baseId,visible:visible,animated:animated,animating:animating,stopAnimation:stopAnimation,modal:modal,style:BACKDROP_STYLE},children)}MenuBackdrop.displayName="MenuBackdrop";var menu_MenuList=forwardRefWithAs((function MenuList(_ref4,ref){var className=_ref4.className,props=_objectWithoutProperties(_ref4,["className"]),_React$useContext2=react.useContext(MenuContext),state=(_React$useContext2.handleItemSelect,_objectWithoutProperties(_React$useContext2,["handleItemSelect"]));return state.visible?react.createElement(MenuBackdrop,state,react.createElement(Menu.a,_extends({},props,state,{ref:ref,className:classnames_default()("reactist_menulist",className)}))):null})),menu_MenuItem=forwardRefWithAs((function MenuItem(_ref5,ref){var value=_ref5.value,children=_ref5.children,onSelect=_ref5.onSelect,_ref5$hideOnSelect=_ref5.hideOnSelect,hideOnSelect=void 0===_ref5$hideOnSelect||_ref5$hideOnSelect,onClick=_ref5.onClick,props=_objectWithoutProperties(_ref5,["value","children","onSelect","hideOnSelect","onClick"]),_React$useContext3=react.useContext(MenuContext),handleItemSelect=_React$useContext3.handleItemSelect,state=_objectWithoutProperties(_React$useContext3,["handleItemSelect"]),hide=state.hide,handleClick=react.useCallback((function handleClick(event){null==onClick||onClick(event);var shouldClose=!1!==(onSelect&&!event.defaultPrevented?onSelect():void 0)&&hideOnSelect;handleItemSelect(value),shouldClose&&hide()}),[onSelect,onClick,handleItemSelect,hideOnSelect,hide,value]);return react.createElement(Menu_MenuItem.a,_extends({},props,state,{ref:ref,onClick:handleClick}),children)})),menu_SubMenu=react.forwardRef((function SubMenu(_ref6,ref){var children=_ref6.children,onItemSelect=_ref6.onItemSelect,props=_objectWithoutProperties(_ref6,["children","onItemSelect"]),_React$useContext4=react.useContext(MenuContext),parentMenuItemSelect=_React$useContext4.handleItemSelect,state=_objectWithoutProperties(_React$useContext4,["handleItemSelect"]),parentMenuHide=state.hide,handleSubItemSelect=react.useCallback((function handleSubItemSelect(value){onItemSelect&&onItemSelect(value),parentMenuItemSelect(value),parentMenuHide()}),[parentMenuHide,parentMenuItemSelect,onItemSelect]),_React$Children$toArr2=_slicedToArray(react.Children.toArray(children),2),button=_React$Children$toArr2[0],list=_React$Children$toArr2[1];return react.createElement(Menu_MenuItem.a,_extends({},state,props,{ref:ref}),(function(buttonProps){return react.createElement(menu_Menu,{onItemSelect:handleSubItemSelect},react.cloneElement(button,_objectSpread(_objectSpread({},buttonProps),{},{className:classnames_default()(buttonProps.className,"reactist_submenu_button")})),list)}))})),menu_MenuGroup=forwardRefWithAs((function MenuGroud(_ref7,ref){var label=_ref7.label,children=_ref7.children,props=_objectWithoutProperties(_ref7,["label","children"]),_React$useContext5=react.useContext(MenuContext),state=(_React$useContext5.handleItemSelect,_objectWithoutProperties(_React$useContext5,["handleItemSelect"]));return react.createElement(MenuGroup.a,_extends({ref:ref},props,state),label?react.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},label):null,children)}));try{menu_Menu.displayName="Menu",menu_Menu.__docgenInfo={description:"Wrapper component to control a menu. It does not render anything, only providing the state\nmanagement for the menu components inside it.",displayName:"Menu",props:{baseId:{defaultValue:null,description:"ID that will serve as a base for all the items IDs.",name:"baseId",required:!1,type:{name:"string | undefined"}},animated:{defaultValue:null,description:"If `true`, `animating` will be set to `true` when `visible` is updated.\nIt'll wait for `stopAnimation` to be called or a CSS transition ends.\nIf `animated` is set to a `number`, `stopAnimation` will be called only\nafter the same number of milliseconds have passed.",name:"animated",required:!1,type:{name:"number | boolean | undefined"}},modal:{defaultValue:null,description:"Toggles Dialog's `modal` state.\n - Non-modal: `preventBodyScroll` doesn't work and focus is free.\n - Modal: `preventBodyScroll` is automatically enabled, focus is\ntrapped within the dialog and the dialog is rendered within a `Portal`\nby default.",name:"modal",required:!1,type:{name:"boolean | undefined"}},placement:{defaultValue:null,description:"Actual `placement`.",name:"placement",required:!1,type:{name:'"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | undefined'}},wrap:{defaultValue:{value:"false"},description:"**Has effect only on two-dimensional composites**. If enabled, moving to\nthe next item from the last one in a row or column will focus the first\nitem in the next row or column and vice-versa.\n - `true` wraps between rows and columns.\n - `horizontal` wraps only between rows.\n - `vertical` wraps only between columns.\n - If `loop` matches the value of `wrap`, it'll wrap between the last\nitem in the last row or column and the first item in the first row or\ncolumn and vice-versa.",name:"wrap",required:!1,type:{name:'boolean | "horizontal" | "vertical" | undefined'}},unstable_virtual:{defaultValue:{value:"false"},description:"If enabled, the composite element will act as an\n[aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant)\ncontainer instead of\n[roving tabindex](https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex).\nDOM focus will remain on the composite while its items receive virtual focus.",name:"unstable_virtual",required:!1,type:{name:"boolean | undefined"}},rtl:{defaultValue:{value:"false"},description:'Determines how `next` and `previous` functions will behave. If `rtl` is\nset to `true`, they will be inverted. This only affects the composite\nwidget behavior. You still need to set `dir="rtl"` on HTML/CSS.',name:"rtl",required:!1,type:{name:"boolean | undefined"}},orientation:{defaultValue:{value:"undefined"},description:"Defines the orientation of the composite widget. If the composite has a\nsingle row or column (one-dimensional), the `orientation` value determines\nwhich arrow keys can be used to move focus:\n - `undefined`: all arrow keys work.\n - `horizontal`: only left and right arrow keys work.\n - `vertical`: only up and down arrow keys work.\n\nIt doesn't have any effect on two-dimensional composites.",name:"orientation",required:!1,type:{name:'"horizontal" | "vertical" | undefined'}},currentId:{defaultValue:{value:"undefined"},description:'The current focused item `id`.\n - `undefined` will automatically focus the first enabled composite item.\n - `null` will focus the base composite element and users will be able to\nnavigate out of it using arrow keys.\n - If `currentId` is initially set to `null`, the base composite element\nitself will have focus and users will be able to navigate to it using\narrow keys.\n@example // First enabled item has initial focus\nuseCompositeState();\n// Base composite element has initial focus\nuseCompositeState({ currentId: null });\n// Specific composite item element has initial focus\nuseCompositeState({ currentId: "item-id" });',name:"currentId",required:!1,type:{name:"string | null | undefined"}},loop:{defaultValue:{value:"false"},description:"On one-dimensional composites:\n - `true` loops from the last item to the first item and vice-versa.\n - `horizontal` loops only if `orientation` is `horizontal` or not set.\n - `vertical` loops only if `orientation` is `vertical` or not set.\n - If `currentId` is initially set to `null`, the composite element will\nbe focused in between the last and first items.\n\nOn two-dimensional composites:\n - `true` loops from the last row/column item to the first item in the\nsame row/column and vice-versa. If it's the last item in the last row, it\nmoves to the first item in the first row and vice-versa.\n - `horizontal` loops only from the last row item to the first item in\nthe same row.\n - `vertical` loops only from the last column item to the first item in\nthe column row.\n - If `currentId` is initially set to `null`, vertical loop will have no\neffect as moving down from the last row or up from the first row will\nfocus the composite element.\n - If `wrap` matches the value of `loop`, it'll wrap between the last\nitem in the last row or column and the first item in the first row or\ncolumn and vice-versa.",name:"loop",required:!1,type:{name:'boolean | "horizontal" | "vertical" | undefined'}},shift:{defaultValue:{value:"false"},description:"**Has effect only on two-dimensional composites**. If enabled, moving up\nor down when there's no next item or the next item is disabled will shift\nto the item right before it.",name:"shift",required:!1,type:{name:"boolean | undefined"}},unstable_includesBaseElement:{defaultValue:{value:"false"},description:"@private",name:"unstable_includesBaseElement",required:!1,type:{name:"boolean | undefined"}},unstable_values:{defaultValue:null,description:"Stores the values of radios and checkboxes within the menu.",name:"unstable_values",required:!1,type:{name:"Record | undefined"}},unstable_fixed:{defaultValue:null,description:"Whether or not the popover should have `position` set to `fixed`.",name:"unstable_fixed",required:!1,type:{name:"boolean | undefined"}},unstable_flip:{defaultValue:null,description:"Flip the popover's placement when it starts to overlap its reference\nelement.",name:"unstable_flip",required:!1,type:{name:"boolean | undefined"}},unstable_offset:{defaultValue:null,description:"Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with `gutter`.",name:"unstable_offset",required:!1,type:{name:"[ReactText, ReactText] | undefined"}},gutter:{defaultValue:null,description:"Offset between the reference and the popover on the main axis. Should not be combined with `unstable_offset`.",name:"gutter",required:!1,type:{name:"number | undefined"}},unstable_preventOverflow:{defaultValue:null,description:"Prevents popover from being positioned outside the boundary.",name:"unstable_preventOverflow",required:!1,type:{name:"boolean | undefined"}},children:{defaultValue:null,description:"The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n`MenuButton` that triggers the menu to be opened or closed.",name:"children",required:!0,type:{name:"ReactNode"}},onItemSelect:{defaultValue:null,description:"An optional callback that will be called back whenever a menu item is selected. It receives\nthe `value` of the selected `MenuItem`.\n\nIf you pass down this callback, it is recommended that you properly memoize it so it does not\nchange on every render.",name:"onItemSelect",required:!1,type:{name:"((value: string | null | undefined) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/menu/menu.tsx#Menu"]={docgenInfo:menu_Menu.__docgenInfo,name:"Menu",path:"src/components/menu/menu.tsx#Menu"})}catch(__react_docgen_typescript_loader_error){}try{menu_SubMenu.displayName="SubMenu",menu_SubMenu.__docgenInfo={description:'This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\na sub-menu.\n\nIts children are expected to have the structure of a first level menu (a `MenuButton` and a\n`MenuList`).\n\n```jsx\n\n\n More options\n \n \n \n \n\n```\n\nThe `MenuButton` will become a menu item in the current menu items list, and it will lead to\nopening a sub-menu with the menu items list below it.',displayName:"SubMenu",props:{children:{defaultValue:null,description:"The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n`MenuButton` that triggers the menu to be opened or closed.",name:"children",required:!0,type:{name:"ReactNode"}},onItemSelect:{defaultValue:null,description:"An optional callback that will be called back whenever a menu item is selected. It receives\nthe `value` of the selected `MenuItem`.\n\nIf you pass down this callback, it is recommended that you properly memoize it so it does not\nchange on every render.",name:"onItemSelect",required:!1,type:{name:"((value: string | null | undefined) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/menu/menu.tsx#SubMenu"]={docgenInfo:menu_SubMenu.__docgenInfo,name:"SubMenu",path:"src/components/menu/menu.tsx#SubMenu"})}catch(__react_docgen_typescript_loader_error){}var keyboard_shortcut=__webpack_require__(487),components_button=__webpack_require__(16);function Menu_stories_ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function Menu_stories_objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [flag, setFlag] = React.useState(false)\n return (\n
\n

Some menu examples

\n \n \n Simple menu \n \n \n Edit\n Duplicate\n Remove\n \n \n \n \n With sub-menu \n \n \n \n Reactist on Github\n \n About Reactist…\n Check for updates…\n
\n \n Preferences\n \n Settings\n Extensions\n
\n Notifications\n \n \n \n \n \n \n With extra features \n \n \n \n \n ✏️\n \n Edit\n \n \n \n 👯‍♀️\n \n Duplicate\n Cmd + D\n \n {\n action(flag ? 'Toggle off' : 'Toggle on')(flag ? '👎' : '👍')\n setFlag((f) => !f)\n return false // This prevents the menu from closing\n }}\n >\n \n {flag ? '👍' : '👎'}\n \n Toggle thumbs up or down\n \n
\n \n Remove first\n Remove completed\n \n Remove all (disabled)\n \n \n \n \n
\n )\n}"}},Menu_stories_SimpleMenuExample.parameters),Menu_stories_OverflowMenuExample.parameters=Menu_stories_objectSpread({storySource:{source:'() => {\n return (\n
\n

A list of items with an overflow options menu

\n

\n This example is meant to be expanded with future features we plan to support (such\n as allowing to control the visible state of the menu from outside, and allow it to\n be used as a context menu).\n

\n
    \n {items.map((item, index) => (\n \n ))}\n
\n
\n )\n}'}},Menu_stories_OverflowMenuExample.parameters)},2899:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"ProgressBarStory",(function(){return ProgressBar_stories_ProgressBarStory})),__webpack_require__.d(__webpack_exports__,"ProgressBarPlaygroundStory",(function(){return ProgressBar_stories_ProgressBarPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2857);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2859);function ProgressBar(_ref){var _ref$fillPercentage=_ref.fillPercentage,fillPercentage=void 0===_ref$fillPercentage?0:_ref$fillPercentage,className=_ref.className,finalClassName=classnames_default()("reactist_progress_bar",className),width=fillPercentage<0?0:fillPercentage>100?100:fillPercentage;return react_default.a.createElement("div",{className:finalClassName},react_default.a.createElement("div",{className:"inner",style:{width:"".concat(width,"%")}}))}ProgressBar.displayName="ProgressBar",ProgressBar.displayName="ProgressBar";try{ProgressBar.displayName="ProgressBar",ProgressBar.__docgenInfo={description:"",displayName:"ProgressBar",props:{className:{defaultValue:null,description:"Additional css class applied to the progress bar.",name:"className",required:!1,type:{name:"string | undefined"}},fillPercentage:{defaultValue:{value:"0"},description:"How much of the progress bar should be filled. Number between 0 and 100 inclusive.",name:"fillPercentage",required:!1,type:{name:"number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/progress-bar/progress-bar.tsx#ProgressBar"]={docgenInfo:ProgressBar.__docgenInfo,name:"ProgressBar",path:"src/components/progress-bar/progress-bar.tsx#ProgressBar"})}catch(__react_docgen_typescript_loader_error){}var components_progress_bar=ProgressBar;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i (\n
\n

Progress Bars

\n \n \n \n \n \n
\n)'}},ProgressBar_stories_ProgressBarStory.parameters),ProgressBar_stories_ProgressBarPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => (\n
\n \n
\n)'}},ProgressBar_stories_ProgressBarPlaygroundStory.parameters);try{ProgressBar_stories_ProgressBarPlaygroundStory.displayName="ProgressBarPlaygroundStory",ProgressBar_stories_ProgressBarPlaygroundStory.__docgenInfo={description:"",displayName:"ProgressBarPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/ProgressBar.stories.tsx#ProgressBarPlaygroundStory"]={docgenInfo:ProgressBar_stories_ProgressBarPlaygroundStory.__docgenInfo,name:"ProgressBarPlaygroundStory",path:"stories/components/ProgressBar.stories.tsx#ProgressBarPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2900:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"RangeInputStory",(function(){return RangeInput_stories_RangeInputStory})),__webpack_require__.d(__webpack_exports__,"RangeInputPlaygroundStory",(function(){return RangeInput_stories_RangeInputPlaygroundStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(943),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2861);function RangeInput(_ref){var _ref$value=_ref.value,value=void 0===_ref$value?0:_ref$value,_ref$min=_ref.min,min=void 0===_ref$min?0:_ref$min,_ref$max=_ref.max,max=void 0===_ref$max?100:_ref$max,_ref$stepSize=_ref.stepSize,stepSize=void 0===_ref$stepSize?1:_ref$stepSize,onPlus=_ref.onPlus,onMinus=_ref.onMinus,_onChange=_ref.onChange,className=_ref.className;"function"!=typeof onPlus&&(onPlus=_onChange),"function"!=typeof onMinus&&(onMinus=_onChange);var rangeInputClassName=classnames_default()("reactist_range_input",className);return react_default.a.createElement("div",{className:rangeInputClassName},react_default.a.createElement("span",{className:"range_btn minus",onClick:function onClick(){return value>min&&onMinus&&onMinus(value-stepSize)}}),react_default.a.createElement("input",{value:value,className:"range_slider",type:"range",min:min,max:max,step:stepSize,onChange:function onChange(event){return _onChange&&_onChange(parseInt(event.target.value))}}),react_default.a.createElement("span",{className:"range_btn plus",onClick:function onClick(){return value void) | undefined"}},onMinus:{defaultValue:null,description:"Optional function that is called when minus button is clicked. If not supplied onChange will be called with the next value.",name:"onMinus",required:!1,type:{name:"((value: number) => void) | undefined"}},onChange:{defaultValue:null,description:"Callback function that is called whenever the range input value changes. When onPlus or onMinus is supplied this will not be called for button clicks.",name:"onChange",required:!1,type:{name:"((value: number) => void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/range-input/range-input.tsx#RangeInput"]={docgenInfo:RangeInput.__docgenInfo,name:"RangeInput",path:"src/components/range-input/range-input.tsx#RangeInput"})}catch(__react_docgen_typescript_loader_error){}var components_range_input=RangeInput;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [value, setValue] = useState(50)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n

RangeInput

\n \n
\n )\n}'}},RangeInput_stories_RangeInputStory.parameters),RangeInput_stories_RangeInputPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const [value, setValue] = useState(50)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n

Current Value: {value}

\n \n
\n )\n}'}},RangeInput_stories_RangeInputPlaygroundStory.parameters);try{RangeInput_stories_RangeInputPlaygroundStory.displayName="RangeInputPlaygroundStory",RangeInput_stories_RangeInputPlaygroundStory.__docgenInfo={description:"",displayName:"RangeInputPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/RangeInput.stories.tsx#RangeInputPlaygroundStory"]={docgenInfo:RangeInput_stories_RangeInputPlaygroundStory.__docgenInfo,name:"RangeInputPlaygroundStory",path:"stories/components/RangeInput.stories.tsx#RangeInputPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2901:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"SelectStory",(function(){return Select_stories_SelectStory})),__webpack_require__.d(__webpack_exports__,"SelectPlaygroundStory",(function(){return Select_stories_SelectPlaygroundStory}));__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(270),__webpack_require__(244),__webpack_require__(313),__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=(__webpack_require__(152),__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2865);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Select(_ref){var value=_ref.value,_ref$options=_ref.options,options=void 0===_ref$options?[]:_ref$options,_onChange=_ref.onChange,_ref$disabled=_ref.disabled,disabled=void 0===_ref$disabled||_ref$disabled,_ref$className=_ref.className,className=void 0===_ref$className?"":_ref$className,defaultValue=_ref.defaultValue,otherProps=_objectWithoutProperties(_ref,["value","options","onChange","disabled","className","defaultValue"]),selectClassName=classnames_default()("reactist_select",{disabled:disabled},className);return react_default.a.createElement("select",_extends({className:selectClassName,value:value,onChange:function onChange(event){return _onChange?_onChange(event.target.value):void 0},disabled:disabled,defaultValue:defaultValue},otherProps),options&&options.map((function(option){return react_default.a.createElement("option",{key:option.key||option.value,value:option.value,disabled:option.disabled},option.text)})))}Select.displayName="Select",Select.displayName="Select",Select.defaultProps={options:[],disabled:!1};try{Select.displayName="Select",Select.__docgenInfo={description:"",displayName:"Select",props:{className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string | undefined"}},disabled:{defaultValue:{value:"false"},description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},value:{defaultValue:null,description:"Currently selected value.",name:"value",required:!1,type:{name:"string | number | undefined"}},onChange:{defaultValue:null,description:"Callback for the change event. Will be called with the next value (not the full event).",name:"onChange",required:!1,type:{name:"((value: string) => void) | undefined"}},options:{defaultValue:{value:"[]"},description:"Options that are rendered in the select.",name:"options",required:!1,type:{name:"Option[] | undefined"}},defaultValue:{defaultValue:null,description:"Value to initially be set",name:"defaultValue",required:!1,type:{name:"string | number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/select/select.tsx#Select"]={docgenInfo:Select.__docgenInfo,name:"Select",path:"src/components/select/select.tsx#Select"})}catch(__react_docgen_typescript_loader_error){}var components_select=Select;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n const [value, setValue] = useState(options[0].value)\n\n const handleChange = (val) => {\n setValue(val)\n }\n\n return (\n
\n \n
\n )\n}'}},Select_stories_SelectPlaygroundStory.parameters);try{Select_stories_SelectPlaygroundStory.displayName="SelectPlaygroundStory",Select_stories_SelectPlaygroundStory.__docgenInfo={description:"",displayName:"SelectPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Select.stories.tsx#SelectPlaygroundStory"]={docgenInfo:Select_stories_SelectPlaygroundStory.__docgenInfo,name:"SelectPlaygroundStory",path:"stories/components/Select.stories.tsx#SelectPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2902:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"InteractivePropsStory",(function(){return inline_stories_InteractivePropsStory})),__webpack_require__.d(__webpack_exports__,"ResponsiveStory",(function(){return inline_stories_ResponsiveStory})),__webpack_require__.d(__webpack_exports__,"NestedStackStory",(function(){return inline_stories_NestedStackStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),storybook_helper=__webpack_require__(5),stack=__webpack_require__(41),heading=__webpack_require__(30),type_helpers=(__webpack_require__(78),__webpack_require__(47),__webpack_require__(188)),responsive_props=__webpack_require__(21),box=__webpack_require__(144),inline_module=__webpack_require__(1563),inline_module_default=__webpack_require__.n(inline_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var inline_Inline=Object(type_helpers.a)((function Inline(_ref,ref){var component=_ref.component,space=_ref.space,_ref$align=_ref.align,align=void 0===_ref$align?"left":_ref$align,_ref$alignY=_ref.alignY,alignY=void 0===_ref$alignY?"center":_ref$alignY,children=_ref.children,props=_objectWithoutProperties(_ref,["component","space","align","alignY","children"]);return react.createElement(box.a,null,react.createElement(box.a,_extends({component:component,display:"flex",flexWrap:"wrap",className:Object(responsive_props.a)(inline_module_default.a,"space",space),ref:ref,alignItems:Object(responsive_props.b)(alignY,(function(alignY){return"top"===alignY?"flexStart":"bottom"===alignY?"flexEnd":"center"})),justifyContent:Object(responsive_props.b)(align,(function(align){return"left"===align?"flexStart":"right"===align?"flexEnd":"center"}))},props),children))}));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i) {\n return (\n \n {renderInlineContent()}\n \n )\n}'}},inline_stories_InteractivePropsStory.parameters),inline_stories_ResponsiveStory.parameters=_objectSpread({storySource:{source:"function ResponsiveStory() {\n return (\n <>\n \n \n \n {renderInlineContent()}\n \n \n \n {renderInlineContent()}\n \n \n \n \n )\n}"}},inline_stories_ResponsiveStory.parameters),inline_stories_NestedStackStory.parameters=_objectSpread({storySource:{source:'function NestedStackStory({ space }: PartialProps) {\n return (\n <>\n \n Parent stack with space=“{space ?? \'none\'}”\n {renderInlineContent()}\n {renderInlineContent()}\n \n \n )\n}'}},inline_stories_NestedStackStory.parameters);try{inline_stories_InteractivePropsStory.displayName="InteractivePropsStory",inline_stories_InteractivePropsStory.__docgenInfo={description:"",displayName:"InteractivePropsStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/inline/inline.stories.tsx#InteractivePropsStory"]={docgenInfo:inline_stories_InteractivePropsStory.__docgenInfo,name:"InteractivePropsStory",path:"src/new-components/inline/inline.stories.tsx#InteractivePropsStory"})}catch(__react_docgen_typescript_loader_error){}try{inline_stories_NestedStackStory.displayName="NestedStackStory",inline_stories_NestedStackStory.__docgenInfo={description:"",displayName:"NestedStackStory",props:{space:{defaultValue:null,description:"",name:"space",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},align:{defaultValue:null,description:"",name:"align",required:!1,type:{name:'"right" | "left" | "center" | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | readonly [ColumnsHorizontalAlignment, ColumnsHorizontalAlignment, ColumnsHorizontalAlignment] | undefined'}},alignY:{defaultValue:null,description:"",name:"alignY",required:!1,type:{name:'"top" | "bottom" | "center" | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment] | readonly [ColumnsVerticalAlignment, ColumnsVerticalAlignment, ColumnsVerticalAlignment] | undefined'}},minWidth:{defaultValue:null,description:"",name:"minWidth",required:!1,type:{name:'0 | "small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},maxWidth:{defaultValue:null,description:"",name:"maxWidth",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | undefined'}},background:{defaultValue:null,description:"",name:"background",required:!1,type:{name:'"default" | "aside" | "highlight" | "selected" | undefined'}},borderRadius:{defaultValue:null,description:"",name:"borderRadius",required:!1,type:{name:'"none" | "full" | "standard" | undefined'}},border:{defaultValue:null,description:"",name:"border",required:!1,type:{name:'"none" | "standard" | undefined'}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingX:{defaultValue:null,description:"",name:"paddingX",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingY:{defaultValue:null,description:"",name:"paddingY",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingTop:{defaultValue:null,description:"",name:"paddingTop",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingRight:{defaultValue:null,description:"",name:"paddingRight",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingBottom:{defaultValue:null,description:"",name:"paddingBottom",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},paddingLeft:{defaultValue:null,description:"",name:"paddingLeft",required:!1,type:{name:'"small" | "large" | "xsmall" | "medium" | "xlarge" | "xxlarge" | readonly [Space, Space] | readonly [Space, Space, Space] | undefined'}},component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/inline/inline.stories.tsx#NestedStackStory"]={docgenInfo:inline_stories_NestedStackStory.__docgenInfo,name:"NestedStackStory",path:"src/new-components/inline/inline.stories.tsx#NestedStackStory"})}catch(__react_docgen_typescript_loader_error){}},2903:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TextStory",(function(){return text_stories_TextStory})),__webpack_require__.d(__webpack_exports__,"TruncatedTextStory",(function(){return text_stories_TruncatedTextStory})),__webpack_require__.d(__webpack_exports__,"TextPlaygroundStory",(function(){return text_stories_TextPlaygroundStory}));__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),stack=__webpack_require__(41),responsive_props=(__webpack_require__(943),__webpack_require__(124),__webpack_require__(1462),__webpack_require__(1464),__webpack_require__(47),__webpack_require__(21)),box=__webpack_require__(144),type_helpers=__webpack_require__(188),text_module=__webpack_require__(325),text_module_default=__webpack_require__.n(text_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var text_Text=Object(type_helpers.a)((function Text(_ref,ref){var _ref$component=_ref.component,component=void 0===_ref$component?"span":_ref$component,_ref$size=_ref.size,size=void 0===_ref$size?"body":_ref$size,_ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,_ref$tone=_ref.tone,tone=void 0===_ref$tone?"normal":_ref$tone,children=_ref.children,lineClamp=_ref.lineClamp,rest=_objectWithoutProperties(_ref,["component","size","weight","tone","children","lineClamp"]),lineClampMultipleLines="string"==typeof lineClamp?parseInt(lineClamp,10)>1:(lineClamp||0)>1;return react.createElement(box.a,_extends({},rest,{component:component,className:[text_module_default.a.text,"body"!==size?Object(responsive_props.a)(text_module_default.a,"size",size):null,"regular"!==weight?Object(responsive_props.a)(text_module_default.a,"weight",weight):null,"normal"!==tone?Object(responsive_props.a)(text_module_default.a,"tone",tone):null,lineClampMultipleLines?text_module_default.a.lineClamp:null,lineClamp?Object(responsive_props.a)(text_module_default.a,"line-clamp",lineClamp.toString()):null],ref:ref}),children)})),storybook_helper=__webpack_require__(5);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__webpack_exports__.default={title:"Design system/Text",component:text_Text,argTypes:{size:Object(storybook_helper.f)(["caption","copy","body","subtitle"],"body"),weight:Object(storybook_helper.f)(["regular","semibold","bold"],"regular"),lineClamp:Object(storybook_helper.f)([1,2,3,4,5],1),children:{control:{type:"text"},defaultValue:"Lorem ipsum dolor sit amet consectetur, adipisicing elit"},tone:Object(storybook_helper.f)(["normal","secondary","danger"],"normal")}};var text_stories_TextStory=function TextStory(){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(stack.a,{space:"medium"},react_default.a.createElement(text_Text,{size:"subtitle",weight:"regular"},"Subtitle Regular"),react_default.a.createElement(text_Text,{size:"subtitle",tone:"secondary"},"Subtitle Secondary"),react_default.a.createElement(text_Text,{size:"subtitle",tone:"danger"},"Subtitle Danger"),react_default.a.createElement(text_Text,{size:"subtitle",weight:"semibold"},"Subtitle Semibold"),react_default.a.createElement(text_Text,{size:"subtitle",weight:"bold"},"Subtitle Bold"),react_default.a.createElement(text_Text,{size:"body",weight:"regular"},"Body Regular"),react_default.a.createElement(text_Text,{size:"body",tone:"secondary"},"Body Secondary"),react_default.a.createElement(text_Text,{size:"body",tone:"danger"},"Body Danger"),react_default.a.createElement(text_Text,{size:"body",weight:"semibold"},"Body Semibold"),react_default.a.createElement(text_Text,{size:"body",weight:"bold"},"Body Bold"),react_default.a.createElement(text_Text,{size:"copy",weight:"regular"},"Copy Regular"),react_default.a.createElement(text_Text,{size:"copy",tone:"secondary"},"Copy Secondary"),react_default.a.createElement(text_Text,{size:"copy",tone:"danger"},"Copy Danger"),react_default.a.createElement(text_Text,{size:"copy",weight:"semibold"},"Copy Semibold"),react_default.a.createElement(text_Text,{size:"copy",weight:"bold"},"Copy Bold"),react_default.a.createElement(text_Text,{size:"caption",weight:"regular"},"Caption Regular"),react_default.a.createElement(text_Text,{size:"caption",tone:"secondary"},"Caption Secondary"),react_default.a.createElement(text_Text,{size:"caption",tone:"danger"},"Caption Danger"),react_default.a.createElement(text_Text,{size:"caption",weight:"semibold"},"Caption Semibold"),react_default.a.createElement(text_Text,{size:"caption",weight:"bold"},"Caption Bold")))};text_stories_TextStory.displayName="TextStory";var text_stories_TruncatedTextStory=function TruncatedTextStory(){return react_default.a.createElement("section",{className:"story"},react_default.a.createElement(stack.a,{space:"medium"},react_default.a.createElement(text_Text,{lineClamp:1},"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a."),react_default.a.createElement(text_Text,{lineClamp:4},"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus! Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.")))};text_stories_TruncatedTextStory.displayName="TruncatedTextStory";var text_stories_TextPlaygroundStory=function TextPlaygroundStory(_ref){var children=_ref.children,args=text_stories_objectWithoutProperties(_ref,["children"]);return react_default.a.createElement("section",{className:"story playground"},react_default.a.createElement(text_Text,args,children))};text_stories_TextPlaygroundStory.displayName="TextPlaygroundStory",text_stories_TextStory.parameters=_objectSpread({storySource:{source:'function TextStory() {\n return (\n
\n \n \n Subtitle Regular\n \n \n Subtitle Secondary\n \n \n Subtitle Danger\n \n \n Subtitle Semibold\n \n \n Subtitle Bold\n \n\n \n Body Regular\n \n \n Body Secondary\n \n \n Body Danger\n \n \n Body Semibold\n \n \n Body Bold\n \n\n \n Copy Regular\n \n \n Copy Secondary\n \n \n Copy Danger\n \n \n Copy Semibold\n \n \n Copy Bold\n \n\n \n Caption Regular\n \n \n Caption Secondary\n \n \n Caption Danger\n \n \n Caption Semibold\n \n \n Caption Bold\n \n \n
\n )\n}'}},text_stories_TextStory.parameters),text_stories_TruncatedTextStory.parameters=_objectSpread({storySource:{source:'function TruncatedTextStory() {\n return (\n
\n \n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque\n recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus!\n Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum\n eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur\n tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla\n consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et\n ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque\n quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis\n temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis\n dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.\n \n\n \n Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident cumque\n recusandae quibusdam, veniam cum illo? Inventore, doloremque necessitatibus!\n Sequi porro alias mollitia, temporibus quidem, aut modi tempora placeat laborum\n eos sapiente necessitatibus autem ipsum officia rerum distinctio consectetur\n tenetur qui! Perspiciatis ab corporis, itaque alias ex optio voluptatum nulla\n consequatur aut explicabo dolorem rerum ratione magnam. Mollitia dignissimos et\n ad commodi quasi molestias fugiat repellendus, magni distinctio voluptate neque\n quos esse asperiores iure excepturi eligendi eaque veniam voluptas blanditiis\n temporibus, omnis laborum quidem autem totam. Iure, numquam. Totam facilis\n dolorum, consequatur, eligendi est dolores modi dolore maiores ipsum magnam a.\n \n \n
\n )\n}'}},text_stories_TruncatedTextStory.parameters),text_stories_TextPlaygroundStory.parameters=_objectSpread({storySource:{source:'function TextPlaygroundStory({ children, ...args }: React.ComponentProps) {\n return (\n
\n {children}\n
\n )\n}'}},text_stories_TextPlaygroundStory.parameters);try{text_stories_TextPlaygroundStory.displayName="TextPlaygroundStory",text_stories_TextPlaygroundStory.__docgenInfo={description:"",displayName:"TextPlaygroundStory",props:{component:{defaultValue:null,description:"",name:"component",required:!1,type:{name:'"symbol" | "object" | "select" | "s" | "text" | "title" | "form" | "slot" | "style" | "button" | "link" | "small" | "pattern" | "a" | "abbr" | "address" | "area" | "article" | "aside" | ... 158 more ... | undefined'}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"body" | "caption" | "copy" | "subtitle" | undefined'}},weight:{defaultValue:null,description:"",name:"weight",required:!1,type:{name:'"regular" | "semibold" | "bold" | undefined'}},tone:{defaultValue:null,description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/text/text.stories.tsx#TextPlaygroundStory"]={docgenInfo:text_stories_TextPlaygroundStory.__docgenInfo,name:"TextPlaygroundStory",path:"src/new-components/text/text.stories.tsx#TextPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2904:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"StandardButtonsStory",(function(){return Button_stories_StandardButtonsStory})),__webpack_require__.d(__webpack_exports__,"SmallButtonsStory",(function(){return Button_stories_SmallButtonsStory})),__webpack_require__.d(__webpack_exports__,"LargeButtonsStory",(function(){return Button_stories_LargeButtonsStory})),__webpack_require__.d(__webpack_exports__,"DisabledButtonsStory",(function(){return Button_stories_DisabledButtonsStory})),__webpack_require__.d(__webpack_exports__,"LoadingButtonsStory",(function(){return Button_stories_LoadingButtonsStory})),__webpack_require__.d(__webpack_exports__,"AlternateBrandingButtonsStory",(function(){return Button_stories_AlternateBrandingButtonsStory})),__webpack_require__.d(__webpack_exports__,"ButtonPlaygroundStory",(function(){return Button_stories_ButtonPlaygroundStory}));__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),react_markdown=__webpack_require__(1566),react_markdown_default=__webpack_require__.n(react_markdown),components_button=(__webpack_require__(2771),__webpack_require__(16));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i .reactist_button {\n background-color: @primary-color;\n\n &--primary:not([disabled]):hover {\n background-color: @primary-color-darker;\n }\n\n &:not(.reactist_button--loading):not(.reactist_button--secondary)&:disabled {\n background-color: @primary-color-lighter;\n }\n\n &.reactist_button--secondary {\n background-color: white;\n border: 1px solid @primary-color;\n color: @primary-color;\n }\n }\n }\n"}),react_default.a.createElement("br",null),react_default.a.createElement(components_button.a,{variant:"primary"},"Primary Button"),react_default.a.createElement(components_button.a,{variant:"secondary"},"Secondary Button"))};Button_stories_AlternateBrandingButtonsStory.displayName="AlternateBrandingButtonsStory";var Button_stories_ButtonPlaygroundStory=function ButtonPlaygroundStory(args){return react_default.a.createElement("section",{className:"story playground"},react_default.a.createElement(components_button.a,args,"Button Text"))};Button_stories_ButtonPlaygroundStory.displayName="ButtonPlaygroundStory",Button_stories_ButtonPlaygroundStory.args={variant:"primary",size:"default",disabled:!1,loading:!1,tooltip:""},Button_stories_ButtonPlaygroundStory.argTypes={disabled:"boolean",loading:"boolean",variant:{type:"select",options:["(none)","primary","secondary","danger","link"]},size:{type:"select",options:["default","small","large"]}},Button_stories_StandardButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n

\n You can and it works as\n you'd expect.\n

\n
\n )\n}'}},Button_stories_StandardButtonsStory.parameters),Button_stories_SmallButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_SmallButtonsStory.parameters),Button_stories_LargeButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_LargeButtonsStory.parameters),Button_stories_DisabledButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n \n \n
\n )\n}'}},Button_stories_DisabledButtonsStory.parameters),Button_stories_LoadingButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n \n \n \n

\n Note: loading has no effect on link or plain buttons. Use{\' \'}\n disabled instead.\n

\n
\n )\n}'}},Button_stories_LoadingButtonsStory.parameters),Button_stories_AlternateBrandingButtonsStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

\n If you want your buttons to have a different color scheme you need to import a\n .css file and overwrite the following rules:\n

\n \n
\n \n \n
\n )\n}'}},Button_stories_AlternateBrandingButtonsStory.parameters),Button_stories_ButtonPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n return (\n
\n \n
\n )\n}'}},Button_stories_ButtonPlaygroundStory.parameters);try{Button_stories_ButtonPlaygroundStory.displayName="ButtonPlaygroundStory",Button_stories_ButtonPlaygroundStory.__docgenInfo={description:"",displayName:"ButtonPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Button.stories.tsx#ButtonPlaygroundStory"]={docgenInfo:Button_stories_ButtonPlaygroundStory.__docgenInfo,name:"ButtonPlaygroundStory",path:"stories/components/Button.stories.tsx#ButtonPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2905:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"StandardNotificationStory",(function(){return Notification_stories_StandardNotificationStory})),__webpack_require__.d(__webpack_exports__,"NonClickableNotificationStory",(function(){return Notification_stories_NonClickableNotificationStory})),__webpack_require__.d(__webpack_exports__,"CustomContentNotificationStory",(function(){return Notification_stories_CustomContentNotificationStory})),__webpack_require__.d(__webpack_exports__,"NotificationPlaygroundStory",(function(){return Notification_stories_NotificationPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),avatar=__webpack_require__(251),tip=__webpack_require__(384),classnames=(__webpack_require__(78),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames),CloseIcon_svg=__webpack_require__(285);__webpack_require__(2853);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Notification(_ref){var id=_ref.id,icon=_ref.icon,title=_ref.title,subtitle=_ref.subtitle,children=_ref.children,customCloseButton=_ref.customCloseButton,onClick=_ref.onClick,onClose=_ref.onClose,_ref$closeAltText=_ref.closeAltText,closeAltText=void 0===_ref$closeAltText?"Close":_ref$closeAltText,className=_ref.className,rest=_objectWithoutProperties(_ref,["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className"]),titleId=title?"".concat(id,"-title"):null,titleIdAttribute=titleId?{id:titleId}:null,subtitleId=subtitle?"".concat(id,"-subtitle"):null,subtitleIdAttribute=subtitleId?{id:subtitleId}:null,contentId=children?"".concat(id,"-content"):null,contentIdAttribute=children?{id:"".concat(id,"-content")}:null,ariaLabelledBy=contentId?{"aria-labelledby":contentId}:titleId?{"aria-labelledby":titleId}:null,ariaDescribedBy=subtitleId&&!children?{"aria-describedby":subtitleId}:null,notificationContent=react_default.a.createElement("div",_extends({className:"reactist-notification__content"},contentIdAttribute),null!=children?children:react_default.a.createElement(react_default.a.Fragment,null,title?react_default.a.createElement("h3",_extends({className:"reactist-notification__title"},titleIdAttribute),title):null,subtitle?react_default.a.createElement("p",_extends({className:"reactist-notification__subtitle"},subtitleIdAttribute),subtitle):null)),notificationBody=react_default.a.createElement("div",{className:"reactist-notification__icon-content-group"},null!=icon?icon:null,notificationContent);return react_default.a.createElement("div",_extends({id:id,role:"dialog",className:classnames_default()("reactist-notification",className,{"reactist-notification--with-button":Boolean(onClick),"reactist-notification--with-close-button":Boolean(onClose)})},ariaLabelledBy,ariaDescribedBy,rest),onClick?react_default.a.createElement("button",{className:"reactist-notification__button",onClick:onClick},notificationBody):notificationBody,onClose?react_default.a.createElement("button",{className:"reactist-notification__close-button",onClick:onClose,"aria-label":closeAltText},null!=customCloseButton?customCloseButton:react_default.a.createElement(CloseIcon_svg.a,null)):null)}Notification.displayName="Notification";try{Notification.displayName="Notification",Notification.__docgenInfo={description:"",displayName:"Notification",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"ReactNode"}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"string | ({} & string) | (ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> & string) | (ReactNodeArray & string) | (ReactPortal & string) | undefined"}},subtitle:{defaultValue:null,description:"",name:"subtitle",required:!1,type:{name:"ReactNode"}},customCloseButton:{defaultValue:null,description:"",name:"customCloseButton",required:!1,type:{name:"ReactNode"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"(((event: MouseEvent) => void) & ((event: MouseEvent) => void)) | undefined"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"((event: MouseEvent) => void) | undefined"}},closeAltText:{defaultValue:{value:"Close"},description:"",name:"closeAltText",required:!1,type:{name:"string | undefined"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/notification/notification.tsx#Notification"]={docgenInfo:Notification.__docgenInfo,name:"Notification",path:"src/components/notification/notification.tsx#Notification"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__(2851);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i {\n return (\n
\n

Standard Notification

\n }\n title="You have a new message!"\n subtitle="Click here to view."\n onClose={action(\'onClose\')}\n onClick={action(\'onClick\')}\n />\n
\n )\n}'}},Notification_stories_StandardNotificationStory.parameters),Notification_stories_NonClickableNotificationStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

Non-clickable Notification

\n \n
\n )\n}'}},Notification_stories_NonClickableNotificationStory.parameters),Notification_stories_CustomContentNotificationStory.parameters=_objectSpread({storySource:{source:'() => {\n return (\n
\n

Custom Content Notification

\n }\n onClose={action(\'onClose\')}\n className="notification-story-notification-container"\n >\n
\n

You received a message from Brock

\n

\n Better not leave him hanging\n \n

\n
\n \n
\n )\n}'}},Notification_stories_CustomContentNotificationStory.parameters),Notification_stories_NotificationPlaygroundStory.parameters=_objectSpread({storySource:{source:'(args) => {\n const onClose = args.onClose ? action(\'onClose\') : undefined\n const onClick = args.onClick ? action(\'onClick\') : undefined\n const icon = args.icon ? (\n
\n \n
\n ) : null\n const children = args.children ? (\n
\n

\n If children is provided, then{\' \'}\n it will be rendered instead of the title and subtitle\n

\n
\n ) : null\n\n return (\n
\n \n {children}\n \n
\n )\n}'}},Notification_stories_NotificationPlaygroundStory.parameters);try{Notification_stories_NotificationPlaygroundStory.displayName="NotificationPlaygroundStory",Notification_stories_NotificationPlaygroundStory.__docgenInfo={description:"",displayName:"NotificationPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Notification.stories.tsx#NotificationPlaygroundStory"]={docgenInfo:Notification_stories_NotificationPlaygroundStory.__docgenInfo,name:"NotificationPlaygroundStory",path:"stories/components/Notification.stories.tsx#NotificationPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2906:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"TabsStory",(function(){return Tabs_stories_TabsStory})),__webpack_require__.d(__webpack_exports__,"TabsPlaygroundStory",(function(){return Tabs_stories_TabsPlaygroundStory}));__webpack_require__(47),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(2867);var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(53),classnames=(__webpack_require__(152),__webpack_require__(2869),__webpack_require__(2870),__webpack_require__(371),__webpack_require__(372),__webpack_require__(373),__webpack_require__(374),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(22)),classnames_default=__webpack_require__.n(classnames);__webpack_require__(2871);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function _typeof(obj){return typeof obj}:function _typeof(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i void) | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/tabs.tsx#Tabs"]={docgenInfo:tabs_Tabs.__docgenInfo,name:"Tabs",path:"src/components/tabs/tabs.tsx#Tabs"})}catch(__react_docgen_typescript_loader_error){}try{tabs_Tab.displayName="Tab",tabs_Tab.__docgenInfo={description:"",displayName:"Tab",props:{className:{defaultValue:null,description:"Additional css class applied to Tab.",name:"className",required:!1,type:{name:"string | undefined"}},disabled:{defaultValue:{value:"false"},description:"Disabled tabs can't be selected.",name:"disabled",required:!1,type:{name:"boolean | undefined"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string | number | undefined"}},title:{defaultValue:null,description:"Title of the tab.",name:"title",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tabs/tabs.tsx#Tab"]={docgenInfo:tabs_Tab.__docgenInfo,name:"Tab",path:"src/components/tabs/tabs.tsx#Tab"})}catch(__react_docgen_typescript_loader_error){}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i {\n return (\n
\n

Tabs

\n \n \n Content of Tab A\n \n \n Content of Tab B\n \n \n Content of Tab C\n \n \n
\n )\n}'}},Tabs_stories_TabsStory.parameters),Tabs_stories_TabsPlaygroundStory.parameters=_objectSpread({storySource:{source:"(args) => {\n return (\n
\n \n \n Content of Tab A\n \n \n Content of Tab B\n \n \n Content of Tab C\n \n \n
\n )\n}"}},Tabs_stories_TabsPlaygroundStory.parameters);try{Tabs_stories_TabsPlaygroundStory.displayName="TabsPlaygroundStory",Tabs_stories_TabsPlaygroundStory.__docgenInfo={description:"",displayName:"TabsPlaygroundStory",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["stories/components/Tabs.stories.tsx#TabsPlaygroundStory"]={docgenInfo:Tabs_stories_TabsPlaygroundStory.__docgenInfo,name:"TabsPlaygroundStory",path:"stories/components/Tabs.stories.tsx#TabsPlaygroundStory"})}catch(__react_docgen_typescript_loader_error){}},2907:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Tooltip}));__webpack_require__(656),__webpack_require__(24),__webpack_require__(17),__webpack_require__(13),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39),__webpack_require__(78),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_12___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_12__),classnames__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__(22),classnames__WEBPACK_IMPORTED_MODULE_13___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_13__),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__(2908),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__(2909),reakit_Tooltip__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__(2910);__webpack_require__(2776);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i void) | undefined"}},unstable_popoverRef:{defaultValue:null,description:"The popover element.\n@private",name:"unstable_popoverRef",required:!1,type:{name:"RefObject | undefined"}},unstable_popoverStyles:{defaultValue:null,description:"Popover styles.\n@private",name:"unstable_popoverStyles",required:!1,type:{name:"CSSProperties | undefined"}},unstable_system:{defaultValue:null,description:"Options passed to `reakit-system-*`\n@private",name:"unstable_system",required:!1,type:{name:"any"}},unstable_portal:{defaultValue:null,description:"Whether or not the tooltip should be rendered within `Portal`.",name:"unstable_portal",required:!1,type:{name:"boolean | undefined"}},wrapElement:{defaultValue:null,description:"Function returned by the hook to wrap the element to which html props\nwill be passed.",name:"wrapElement",required:!1,type:{name:"((element: ReactNode) => ReactNode) | undefined"}},content:{defaultValue:null,description:"",name:"content",required:!0,type:{name:"string | number | boolean | {} | ReactElement ReactElement Component)> | null) | (new (props: any) => Component<...>)> | ... 4 more ... | undefined"}},position:{defaultValue:{value:"top"},description:"",name:"position",required:!1,type:{name:'"auto-start" | "auto" | "auto-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | undefined'}},gapSize:{defaultValue:{value:"3"},description:"",name:"gapSize",required:!1,type:{name:"number | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tooltip/tooltip.tsx#Tooltip"]={docgenInfo:Tooltip.__docgenInfo,name:"Tooltip",path:"src/components/tooltip/tooltip.tsx#Tooltip"})}catch(__react_docgen_typescript_loader_error){}},30:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Heading}));__webpack_require__(943),__webpack_require__(124),__webpack_require__(1462),__webpack_require__(1464),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(0),_responsive_props__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(21),_box__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(144),_heading_module_css__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(324),_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default=__webpack_require__.n(_heading_module_css__WEBPACK_IMPORTED_MODULE_11__);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Heading=react__WEBPACK_IMPORTED_MODULE_8__.forwardRef((function Heading(_ref,ref){var level=_ref.level,_ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,size=_ref.size,_ref$tone=_ref.tone,tone=void 0===_ref$tone?"normal":_ref$tone,children=_ref.children,lineClamp=_ref.lineClamp,props=_objectWithoutProperties(_ref,["level","weight","size","tone","children","lineClamp"]),headingElementName="h".concat(level),lineClampMultipleLines="string"==typeof lineClamp?parseInt(lineClamp,10)>1:(lineClamp||0)>1;return react__WEBPACK_IMPORTED_MODULE_8__.createElement(_box__WEBPACK_IMPORTED_MODULE_10__.a,_extends({},props,{className:[_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a.heading,"regular"!==weight?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"weight",weight):null,"normal"!==tone?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"tone",tone):null,Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"size",size),lineClampMultipleLines?_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a.lineClamp:null,lineClamp?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_9__.a)(_heading_module_css__WEBPACK_IMPORTED_MODULE_11___default.a,"line-clamp",lineClamp.toString()):null],component:headingElementName,ref:ref}),children)}));try{Heading.displayName="Heading",Heading.__docgenInfo={description:"",displayName:"Heading",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:'"smaller" | "larger" | "largest" | undefined'}},level:{defaultValue:null,description:"",name:"level",required:!0,type:{name:"HeadingLevel"}},weight:{defaultValue:{value:"regular"},description:"",name:"weight",required:!1,type:{name:'"regular" | "light" | undefined'}},tone:{defaultValue:{value:"normal"},description:"",name:"tone",required:!1,type:{name:'"secondary" | "danger" | "normal" | undefined'}},lineClamp:{defaultValue:null,description:"",name:"lineClamp",required:!1,type:{name:'1 | 2 | 5 | "1" | 3 | "2" | 4 | "3" | "4" | "5" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/heading/heading.tsx#Heading"]={docgenInfo:Heading.__docgenInfo,name:"Heading",path:"src/new-components/heading/heading.tsx#Heading"})}catch(__react_docgen_typescript_loader_error){}},324:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2625);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},325:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2633);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},384:function(module,__webpack_exports__,__webpack_require__){"use strict";var react=__webpack_require__(0),react_default=__webpack_require__.n(react),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames),ThinQuestionMarkIcon_svg_ThinQuestionMark=function ThinQuestionMark(){return react_default.a.createElement("svg",{width:"18px",height:"18px",viewBox:"0 0 18 18"},react_default.a.createElement("g",{stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},react_default.a.createElement("g",{fill:"#979797"},react_default.a.createElement("path",{d:"M9,17 C13.418278,17 17,13.418278 17,9 C17,4.581722 13.418278,1 9,1 C4.581722,1 1,4.581722 1,9 C1,13.418278 4.581722,17 9,17 Z M9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 Z",fillRule:"nonzero"}),react_default.a.createElement("path",{d:"M5.625,6.671875 L6.9609375,6.671875 C7.046875,5.5546875 7.796875,4.859375 8.9765625,4.859375 C10.140625,4.859375 10.890625,5.5703125 10.890625,6.5390625 C10.890625,7.375 10.5390625,7.8671875 9.6328125,8.421875 C8.5625,9.0625 8.0625,9.765625 8.0703125,10.796875 L8.0703125,11.515625 L9.4375,11.515625 L9.4375,11.0078125 C9.4375,10.1875 9.71875,9.75 10.7109375,9.1640625 C11.7109375,8.5625 12.34375,7.6953125 12.34375,6.46875 C12.34375,4.859375 11,3.640625 9.03125,3.640625 C6.8359375,3.640625 5.7109375,4.984375 5.625,6.671875 Z M8.859375,15.140625 C9.4921875,15.140625 9.9375,14.6875 9.9375,14.0546875 C9.9375,13.4140625 9.4921875,12.9609375 8.859375,12.9609375 C8.2265625,12.9609375 7.7734375,13.4140625 7.7734375,14.0546875 C7.7734375,14.6875 8.2265625,15.140625 8.859375,15.140625 Z"}))))};ThinQuestionMarkIcon_svg_ThinQuestionMark.displayName="ThinQuestionMark";var ThinQuestionMarkIcon_svg=ThinQuestionMarkIcon_svg_ThinQuestionMark,dropdown=__webpack_require__(115);__webpack_require__(2855);function Tip(_ref){var title=_ref.title,message=_ref.message,top=_ref.top,className=_ref.className,tipClass=classnames_default()("reactist_tip__container",className);return react_default.a.createElement(dropdown.a.Box,{top:top,className:tipClass},react_default.a.createElement(dropdown.a.Trigger,null,react_default.a.createElement(ThinQuestionMarkIcon_svg,null)),react_default.a.createElement(dropdown.a.Body,null,react_default.a.createElement("div",{className:"reactist_tip"},react_default.a.createElement("p",{className:"reactist_tip--title"},title),react_default.a.createElement("p",{className:"reactist_tip--message"},message))))}Tip.displayName="Tip",Tip.displayName="Tip",Tip.defaultProps={top:!1};try{Tip.displayName="Tip",Tip.__docgenInfo={description:"",displayName:"Tip",props:{className:{defaultValue:null,description:"Additional css class that is applied to the Tip.",name:"className",required:!1,type:{name:"string | undefined"}},title:{defaultValue:null,description:"Title of the tip.",name:"title",required:!1,type:{name:"ReactNode"}},message:{defaultValue:null,description:"Message of the tip.",name:"message",required:!1,type:{name:"ReactNode"}},top:{defaultValue:{value:"false"},description:"Whether the tip content should be displayed to the top or not. Maps to the Dropdown.Box top property.",name:"top",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/tip/tip.tsx#Tip"]={docgenInfo:Tip.__docgenInfo,name:"Tip",path:"src/components/tip/tip.tsx#Tip"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=Tip},41:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return stack_Stack}));__webpack_require__(152),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),react_keyed_flatten_children=__webpack_require__(1561),react_keyed_flatten_children_default=__webpack_require__.n(react_keyed_flatten_children),type_helpers=__webpack_require__(188),responsive_props=__webpack_require__(21),box=__webpack_require__(144),divider_module=__webpack_require__(986),divider_module_default=__webpack_require__.n(divider_module);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function Divider(_ref){var _ref$weight=_ref.weight,weight=void 0===_ref$weight?"regular":_ref$weight,props=_objectWithoutProperties(_ref,["weight"]);return react.createElement(box.a,_extends({component:"hr",className:[divider_module_default.a.divider,"regular"!==weight?Object(responsive_props.a)(divider_module_default.a,"weight",weight):null]},props))}Divider.displayName="Divider";try{Divider.displayName="Divider",Divider.__docgenInfo={description:"",displayName:"Divider",props:{weight:{defaultValue:{value:"regular"},description:"",name:"weight",required:!1,type:{name:'"strong" | "regular" | undefined'}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/divider/divider.tsx#Divider"]={docgenInfo:Divider.__docgenInfo,name:"Divider",path:"src/new-components/divider/divider.tsx#Divider"})}catch(__react_docgen_typescript_loader_error){}var stack_module=__webpack_require__(1562),stack_module_default=__webpack_require__.n(stack_module);function stack_extends(){return(stack_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var stack_Stack=Object(type_helpers.a)((function Stack(_ref,ref){var component=_ref.component,space=_ref.space,_ref$dividers=_ref.dividers,dividers=void 0!==_ref$dividers&&_ref$dividers,children=_ref.children,className=_ref.className,props=stack_objectWithoutProperties(_ref,["component","space","dividers","children","className"]);return react.createElement(box.a,stack_extends({component:component,className:[className,Object(responsive_props.a)(stack_module_default.a,"space",space)],ref:ref},props),dividers?react.Children.map(react_keyed_flatten_children_default()(children),(function(child,index){return index>0?react.createElement(react.Fragment,null,react.createElement(Divider,{weight:"string"==typeof dividers?dividers:void 0}),child):child})):children)}))},487:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__(270),__webpack_require__(1465),__webpack_require__(475),__webpack_require__(152),__webpack_require__(961),__webpack_require__(1491),__webpack_require__(2801),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react=__webpack_require__(0),classnames=__webpack_require__(22),classnames_default=__webpack_require__.n(classnames);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var globalTranslateKey=function globalTranslateKey(key){return key};function translateKeyMac(key){switch(key.toLowerCase()){case"cmd":case"mod":return"⌘";case"control":case"ctrl":return"⌃";case"alt":return"⌥";case"shift":return"⇧";case"space":return"␣";default:return key}}function KeyboardShortcut(_ref){var children=_ref.children,className=_ref.className,_ref$translateKey=_ref.translateKey,translateKey=void 0===_ref$translateKey?globalTranslateKey:_ref$translateKey,_ref$isMac=_ref.isMac,isMac=void 0===_ref$isMac?null!=navigator.platform&&navigator.platform.toUpperCase().includes("MAC"):_ref$isMac,props=_objectWithoutProperties(_ref,["children","className","translateKey","isMac"]),shortcuts="string"==typeof children?[children]:children;return react.createElement("span",_extends({className:classnames_default()("reactist_keyboard_shortcut",className,{"reactist_keyboard_shortcut--macos":isMac})},props),shortcuts.map((function(shortcut,i){return react.createElement(react.Fragment,{key:i},0===i?null:", ",react.createElement("kbd",null,function parseKeys(shortcut,isMac,translateKey){var t=isMac?translateKeyMac:translateKey,_hasModifiers=function hasModifiers(str){return/\b(mod|cmd|ctrl|control|alt|shift)\b/i.test(str)}(shortcut);return isMac||(shortcut=shortcut.replace(/\b(mod|cmd)\b/i,"ctrl")),shortcut.split(/\s*\+\s*/).map((function mapIndividualKey(str){return function isSpecialKey(str){return/^(mod|cmd|ctrl|control|alt|shift|space)$/i.test(str)}(str)?function capitalize(str){return str.charAt(0).toUpperCase()+str.slice(1).toLowerCase()}(t(str)):_hasModifiers&&1===str.length?str.toUpperCase():str}))}(shortcut,isMac,translateKey).map((function(key,j){return react.createElement("kbd",{key:j},key)}))))})))}KeyboardShortcut.setTranslateKey=function(tr){globalTranslateKey=tr},KeyboardShortcut.displayName="KeyboardShortcut";try{KeyboardShortcut.displayName="KeyboardShortcut",KeyboardShortcut.__docgenInfo={description:"",displayName:"KeyboardShortcut",props:{children:{defaultValue:null,description:"The shortcut to be represented as markup. It supports an intuitive syntax where you can\ncombine modifiers (cmd, ctrl, shift, alt) with single keys all concatenated with plus signs.\nYou can also pass various shortcuts as an array, which will be depicted separated by commas.",name:"children",required:!0,type:{name:"string | string[]"}},translateKey:{defaultValue:null,description:"A function that allows you to change how some key names are represented. This may be useful,\nfor instance, to translate modifier names that are expressed differently in other languages\n(e.g. `Ctrl` is named `Strg` in German).\n\nIt defaults to a global version that leaves the key as is. You can pass your version as a\nprop, or you can also set your own version of this global default one, so you don't need to\npass your own on each invocation of this component.\n\n```js\nimport { KeyboardShortcut } from '@doist/reactist'\nKeyboardShortcut.setTranslateKey = key => { ... }\n```\n\nNote: When the component detects the macOS operating system it bypasses key translation for\nmost modifiers and uses macOS-specific symbols. See the `isMac` prop for details.",name:"translateKey",required:!1,type:{name:"((key: string) => string) | undefined"}},isMac:{defaultValue:{value:"navigator.platform != null && navigator.platform.toUpperCase().includes('MAC')"},description:"This prop is not meant to be passed. The component will automatically initialize it to `true`\nif it detects that the current browser / operating system is on macOS, in which case modifier\nkeys are represented using macOS' notation (e.g. ⌘ ⌃ ⌥ ⇧).\n\nThough it is discouraged, if you don't want this special treatment in macOS, you can pass\n`isMac={false}` in all invocations of this component.",name:"isMac",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/keyboard-shortcut/keyboard-shortcut.tsx#KeyboardShortcut"]={docgenInfo:KeyboardShortcut.__docgenInfo,name:"KeyboardShortcut",path:"src/components/keyboard-shortcut/keyboard-shortcut.tsx#KeyboardShortcut"})}catch(__react_docgen_typescript_loader_error){}__webpack_exports__.a=KeyboardShortcut},5:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"f",(function(){return select})),__webpack_require__.d(__webpack_exports__,"i",(function(){return selectWithNone})),__webpack_require__.d(__webpack_exports__,"h",(function(){return selectSize})),__webpack_require__.d(__webpack_exports__,"g",(function(){return selectCount})),__webpack_require__.d(__webpack_exports__,"j",(function(){return times})),__webpack_require__.d(__webpack_exports__,"e",(function(){return reusableBoxProps})),__webpack_require__.d(__webpack_exports__,"d",(function(){return disableResponsiveProps})),__webpack_require__.d(__webpack_exports__,"c",(function(){return Wrapper})),__webpack_require__.d(__webpack_exports__,"b",(function(){return ResponsiveWidthRef})),__webpack_require__.d(__webpack_exports__,"a",(function(){return Placeholder}));__webpack_require__(473),__webpack_require__(152),__webpack_require__(1454),__webpack_require__(17),__webpack_require__(269),__webpack_require__(13),__webpack_require__(153),__webpack_require__(124),__webpack_require__(154),__webpack_require__(155),__webpack_require__(140),__webpack_require__(156),__webpack_require__(313),__webpack_require__(270),__webpack_require__(244),__webpack_require__(24),__webpack_require__(34),__webpack_require__(35),__webpack_require__(36),__webpack_require__(37),__webpack_require__(38),__webpack_require__(39);var react__WEBPACK_IMPORTED_MODULE_22__=__webpack_require__(0),_box__WEBPACK_IMPORTED_MODULE_23__=__webpack_require__(144),_heading__WEBPACK_IMPORTED_MODULE_24__=__webpack_require__(30),_stack__WEBPACK_IMPORTED_MODULE_25__=__webpack_require__(41);__webpack_require__(2620);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==arguments[1]?arguments[1]:"none";return{control:{type:"select"},options:["none"].concat(_toConsumableArray(options)),defaultValue:defaultValue,mapping:{none:void 0}}}function selectSize(){var defaultValue=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"none";return selectWithNone(["xsmall","small","medium","large","xlarge","xxlarge"],defaultValue)}function selectCount(label){var defaultValue=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5;return{control:{type:"number",min:1},name:label,defaultValue:defaultValue}}function times(count){return Array.apply(null,Array(count)).map((function(_x,i){return i}))}function reusableBoxProps(){return{maxWidth:selectWithNone(["xsmall","small","medium","large","xlarge"]),padding:selectSize(),paddingX:selectSize(),paddingY:selectSize(),paddingTop:selectSize(),paddingRight:selectSize(),paddingBottom:selectSize(),paddingLeft:selectSize()}}var disableResponsiveProps=Object.keys(reusableBoxProps()).reduce((function(accumulator,key){return _objectSpread(_objectSpread({},accumulator),{},_defineProperty({},key,{control:!1}))}),{});function Wrapper(_ref){var title=_ref.title,children=_ref.children,_ref$border=_ref.border,border=void 0!==_ref$border&&_ref$border;return react__WEBPACK_IMPORTED_MODULE_22__.createElement(_stack__WEBPACK_IMPORTED_MODULE_25__.a,{space:"small"},title?react__WEBPACK_IMPORTED_MODULE_22__.createElement(_heading__WEBPACK_IMPORTED_MODULE_24__.a,{level:"2"},title):null,react__WEBPACK_IMPORTED_MODULE_22__.createElement(_box__WEBPACK_IMPORTED_MODULE_23__.a,{style:border?{border:"1px dotted black"}:void 0},children))}function ResponsiveWidthRef(){return react__WEBPACK_IMPORTED_MODULE_22__.createElement(react__WEBPACK_IMPORTED_MODULE_22__.Fragment,null,react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{height:"36px"}}),react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{position:"fixed",top:0,left:0}},react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{width:"992px",height:"20px",backgroundColor:"#ccc"}},"desktop min width"),react__WEBPACK_IMPORTED_MODULE_22__.createElement("div",{style:{width:"768px",height:"20px",backgroundColor:"#ddd"}},"tablet min width")))}function Placeholder(_ref2){var label=_ref2.label,_ref2$width=_ref2.width,width=void 0===_ref2$width?"100%":_ref2$width,_ref2$height=_ref2.height,height=void 0===_ref2$height?"30px":_ref2$height;return react__WEBPACK_IMPORTED_MODULE_22__.createElement(_box__WEBPACK_IMPORTED_MODULE_23__.a,{style:{backgroundColor:"lightgreen",border:"1px solid green",width:width,height:height},display:"flex",alignItems:"center",padding:"medium"},label)}Wrapper.displayName="Wrapper",Placeholder.displayName="Placeholder";try{selectSize.displayName="selectSize",selectSize.__docgenInfo={description:"",displayName:"selectSize",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#selectSize"]={docgenInfo:selectSize.__docgenInfo,name:"selectSize",path:"src/new-components/storybook-helper.tsx#selectSize"})}catch(__react_docgen_typescript_loader_error){}try{times.displayName="times",times.__docgenInfo={description:"",displayName:"times",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#times"]={docgenInfo:times.__docgenInfo,name:"times",path:"src/new-components/storybook-helper.tsx#times"})}catch(__react_docgen_typescript_loader_error){}try{Wrapper.displayName="Wrapper",Wrapper.__docgenInfo={description:"",displayName:"Wrapper",props:{title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"ReactNode"}},border:{defaultValue:{value:"false"},description:"",name:"border",required:!1,type:{name:"boolean | undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#Wrapper"]={docgenInfo:Wrapper.__docgenInfo,name:"Wrapper",path:"src/new-components/storybook-helper.tsx#Wrapper"})}catch(__react_docgen_typescript_loader_error){}try{Placeholder.displayName="Placeholder",Placeholder.__docgenInfo={description:"",displayName:"Placeholder",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"ReactNode"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/new-components/storybook-helper.tsx#Placeholder"]={docgenInfo:Placeholder.__docgenInfo,name:"Placeholder",path:"src/new-components/storybook-helper.tsx#Placeholder"})}catch(__react_docgen_typescript_loader_error){}},68:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2608);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},687:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2629);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}},8:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Column})),__webpack_require__.d(__webpack_exports__,"b",(function(){return Columns}));__webpack_require__(1465),__webpack_require__(475),__webpack_require__(17),__webpack_require__(78),__webpack_require__(13),__webpack_require__(47);var react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(0),_type_helpers__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(188),_responsive_props__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(21),_box__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(144),_columns_module_css__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(687),_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default=__webpack_require__.n(_columns_module_css__WEBPACK_IMPORTED_MODULE_10__);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var Column=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_7__.a)((function Column(_ref,ref){_ref.component;var _ref$width=_ref.width,width=void 0===_ref$width?"auto":_ref$width,children=_ref.children,props=_objectWithoutProperties(_ref,["component","width","children"]);return react__WEBPACK_IMPORTED_MODULE_6__.createElement(_box__WEBPACK_IMPORTED_MODULE_9__.a,_extends({className:[_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a.column,"content"!==width?Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.a)(_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a,"columnWidth",width.replace("/","-")):null],minWidth:0,width:"content"!==width?"full":void 0,flexShrink:"content"===width?0:void 0,ref:ref},props),children)})),Columns=Object(_type_helpers__WEBPACK_IMPORTED_MODULE_7__.a)((function Columns(_ref2,ref){var space=_ref2.space,align=_ref2.align,alignY=_ref2.alignY,collapseBelow=_ref2.collapseBelow,children=_ref2.children,props=_objectWithoutProperties(_ref2,["space","align","alignY","collapseBelow","children"]);return react__WEBPACK_IMPORTED_MODULE_6__.createElement(_box__WEBPACK_IMPORTED_MODULE_9__.a,_extends({},props,{className:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.a)(_columns_module_css__WEBPACK_IMPORTED_MODULE_10___default.a,"space",space),flexDirection:"desktop"===collapseBelow?["column","column","row"]:"tablet"===collapseBelow?["column","row"]:"row",display:"flex",alignItems:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.b)(alignY,(function(alignY){return"top"===alignY?"flexStart":"bottom"===alignY?"flexEnd":"center"})),justifyContent:Object(_responsive_props__WEBPACK_IMPORTED_MODULE_8__.b)(align,(function(align){return"left"===align?"flexStart":"right"===align?"flexEnd":"center"})),flexGrow:1,ref:ref}),children)}))},986:function(module,exports,__webpack_require__){var api=__webpack_require__(311),content=__webpack_require__(2623);"string"==typeof(content=content.__esModule?content.default:content)&&(content=[[module.i,content,""]]);var options={insert:"head",singleton:!1};api(content,options);module.exports=content.locals||{}}},[[1598,2,3]]]); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4852947ce..8e1628351 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@doist/reactist", - "version": "9.2.0-beta.9", + "version": "9.2.0-beta.10", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 13780ee84..fd60afd11 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@doist/reactist", "description": "Open source React components by Doist", "author": "Henning Muszynski (http://doist.com)", - "version": "9.2.0-beta.9", + "version": "9.2.0-beta.10", "license": "MIT", "homepage": "https://github.com/Doist/reactist#readme", "repository": "git+https://github.com/Doist/reactist.git", diff --git a/src/new-components/base-field/base-field.module.css b/src/new-components/base-field/base-field.module.css index f5862f918..c4a8abfdb 100644 --- a/src/new-components/base-field/base-field.module.css +++ b/src/new-components/base-field/base-field.module.css @@ -1,7 +1,7 @@ .container label { box-sizing: border-box; display: block; - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); } .primaryLabel { diff --git a/src/new-components/base-field/base-field.tsx b/src/new-components/base-field/base-field.tsx index 45d7e7540..bb0fa4521 100644 --- a/src/new-components/base-field/base-field.tsx +++ b/src/new-components/base-field/base-field.tsx @@ -8,7 +8,7 @@ import styles from './base-field.module.css' function FieldHint({ id, children }: { id: string; children: React.ReactNode }) { return ( - + {children} ) diff --git a/src/new-components/box/box.module.css b/src/new-components/box/box.module.css index 0c970e43c..f1070bfa9 100644 --- a/src/new-components/box/box.module.css +++ b/src/new-components/box/box.module.css @@ -3,7 +3,7 @@ border: 0; margin: 0; padding: 0; - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); font-family: inherit; vertical-align: baseline; background-color: transparent; diff --git a/src/new-components/default-styles.less b/src/new-components/default-styles.less index 269b23a30..11c74ccc9 100644 --- a/src/new-components/default-styles.less +++ b/src/new-components/default-styles.less @@ -23,10 +23,10 @@ --reactist-spacing-xxlarge: 32px; /* font sizes */ - --reactist-font-size-xsmall: 10px; - --reactist-font-size-small: 12px; - --reactist-font-size-normal: 14px; - --reactist-font-size-large: 16px; + --reactist-font-size-caption: 12px; + --reactist-font-size-copy: 13px; + --reactist-font-size-body: 14px; + --reactist-font-size-subtitle: 16px; --reactist-font-size-header: 20px; --reactist-font-size-header-large: 24px; --reactist-font-size-header-xlarge: 32px; diff --git a/src/new-components/heading/heading.module.css b/src/new-components/heading/heading.module.css index ae5869d3d..291a43a7c 100644 --- a/src/new-components/heading/heading.module.css +++ b/src/new-components/heading/heading.module.css @@ -28,11 +28,11 @@ h1.size-larger { font-size: var(--reactist-font-size-header-large); } h1.size-smaller { - font-size: var(--reactist-font-size-large); + font-size: var(--reactist-font-size-subtitle); } h2.heading { - font-size: var(--reactist-font-size-large); + font-size: var(--reactist-font-size-subtitle); } h2.size-largest { font-size: var(--reactist-font-size-header-large); @@ -41,20 +41,20 @@ h2.size-larger { font-size: var(--reactist-font-size-header); } h2.size-smaller { - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); } h3.heading { - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); } h3.size-largest { font-size: var(--reactist-font-size-header); } h3.size-larger { - font-size: var(--reactist-font-size-large); + font-size: var(--reactist-font-size-subtitle); } h3.size-smaller { - font-size: var(--reactist-font-size-small); + font-size: var(--reactist-font-size-caption); } h4.heading, @@ -64,7 +64,7 @@ h6.heading { * unlike at higher levels, this one is kept as the same size as h3's * you can make it two levels larger visually, but making it smaller has no effect */ - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); } h4.size-largest, @@ -76,7 +76,7 @@ h6.size-largest { h4.size-larger, h5.size-larger, h6.size-larger { - font-size: var(--reactist-font-size-large); + font-size: var(--reactist-font-size-subtitle); } /* h4/h5/h6 can't be made smaller, maybe we reconsider this? */ diff --git a/src/new-components/select-field/select-field.module.css b/src/new-components/select-field/select-field.module.css index cf0e5e79b..2fae7d868 100644 --- a/src/new-components/select-field/select-field.module.css +++ b/src/new-components/select-field/select-field.module.css @@ -23,7 +23,7 @@ --tmp-line-height-increase: 4px; --tmp-vertical-padding: calc( ( - var(--tmp-desired-height) - var(--reactist-font-size-normal) - + var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase) ) / 2 ); @@ -36,8 +36,8 @@ background: none; border-radius: var(--reactist-border-radius-small); border: 1px solid var(--reactist-framework-border); - font-size: var(--reactist-font-size-normal); - line-height: calc(var(--reactist-font-size-normal) + 4px); + font-size: var(--reactist-font-size-body); + line-height: calc(var(--reactist-font-size-body) + 4px); margin: 0; } diff --git a/src/new-components/text-field/text-field.module.css b/src/new-components/text-field/text-field.module.css index 27d966ed0..5373fe217 100644 --- a/src/new-components/text-field/text-field.module.css +++ b/src/new-components/text-field/text-field.module.css @@ -31,13 +31,13 @@ --tmp-line-height-increase: 4px; --tmp-vertical-padding: calc( ( - var(--tmp-desired-height) - var(--reactist-font-size-normal) - + var(--tmp-desired-height) - var(--reactist-font-size-body) - var(--tmp-line-height-increase) ) / 2 ); - font-size: var(--reactist-font-size-normal); - line-height: calc(var(--reactist-font-size-normal) + 4px); + font-size: var(--reactist-font-size-body); + line-height: calc(var(--reactist-font-size-body) + 4px); padding: var(--tmp-vertical-padding) 10px; margin: 0; } diff --git a/src/new-components/text/text.module.css b/src/new-components/text/text.module.css index 129d784b6..f38fe6fd2 100644 --- a/src/new-components/text/text.module.css +++ b/src/new-components/text/text.module.css @@ -1,26 +1,26 @@ .text { - font-size: var(--reactist-font-size-normal); + font-size: var(--reactist-font-size-body); font-weight: var(--reactist-font-weight-regular); color: var(--reactist-content-primary); } -.size-xsmall { - font-size: var(--reactist-font-size-xsmall); +.size-caption { + font-size: var(--reactist-font-size-caption); } -.size-small { - font-size: var(--reactist-font-size-small); +.size-copy { + font-size: var(--reactist-font-size-copy); } -.size-large { - font-size: var(--reactist-font-size-large); +.size-body { + font-size: var(--reactist-font-size-body); } -.size-xlarge { - font-size: var(--reactist-font-size-large); +.size-subtitle { + font-size: var(--reactist-font-size-subtitle); } -.weight-medium { +.weight-semibold { font-weight: var(--reactist-font-weight-medium); } -.weight-strong { +.weight-bold { font-weight: var(--reactist-font-weight-strong); } diff --git a/src/new-components/text/text.stories.tsx b/src/new-components/text/text.stories.tsx index 6f642fde3..a410cb05d 100644 --- a/src/new-components/text/text.stories.tsx +++ b/src/new-components/text/text.stories.tsx @@ -8,8 +8,8 @@ export default { title: 'Design system/Text', component: Text, argTypes: { - size: select(['xsmall', 'small', 'standard', 'large', 'xlarge'], 'standard'), - weight: select(['regular', 'medium', 'strong'], 'regular'), + size: select(['caption', 'copy', 'body', 'subtitle'], 'body'), + weight: select(['regular', 'semibold', 'bold'], 'regular'), lineClamp: select([1, 2, 3, 4, 5], 1), children: { control: { @@ -25,84 +25,68 @@ export function TextStory() { return (
- - Text, xlarge, strong, secondary (16px) + + Subtitle Regular - - Text, xlarge, strong, danger + + Subtitle Secondary - - Text, xlarge, strong + + Subtitle Danger - - Text, xlarge, medium + + Subtitle Semibold - - Text, xlarge, regular + + Subtitle Bold - - Text, large, strong, secondary (16px) + + Body Regular - - Text, large, strong, danger + + Body Secondary - - Text, large, strong + + Body Danger - - Text, large, medium + + Body Semibold - - Text, large, regular + + Body Bold - - Text, standard, strong, secondary (14px) + + Copy Regular - - Text, standard, strong, danger + + Copy Secondary - - Text, standard, strong + + Copy Danger - - Text, standard, medium + + Copy Semibold - - Text, standard, regular + + Copy Bold - - Text, small, strong, secondary (12px) + + Caption Regular - - Text, small, strong, danger + + Caption Secondary - - Text, small, strong + + Caption Danger - - Text, small, medium + + Caption Semibold - - Text, small, regular - - - - Text, xsmall, strong, secondary (10px) - - - Text, xsmall, strong, danger - - - Text, xsmall, strong - - - Text, xsmall, medium - - - Text, ssmall, regular + + Caption Bold
diff --git a/src/new-components/text/text.tsx b/src/new-components/text/text.tsx index 38f862bdc..74db5c2c3 100644 --- a/src/new-components/text/text.tsx +++ b/src/new-components/text/text.tsx @@ -10,8 +10,8 @@ import styles from './text.module.css' type TextProps = { component?: ComponentTypes children: React.ReactNode - size?: 'xsmall' | 'small' | 'standard' | 'large' | 'xlarge' - weight?: 'regular' | 'medium' | 'strong' + size?: 'caption' | 'copy' | 'body' | 'subtitle' + weight?: 'regular' | 'semibold' | 'bold' tone?: Tone lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' } @@ -19,7 +19,7 @@ type TextProps = { const Text = forwardRefWithAs(function Text( { component = 'span', - size = 'standard', + size = 'body', weight = 'regular', tone = 'normal', children, @@ -37,7 +37,7 @@ const Text = forwardRefWithAs(function Text( component={component} className={[ styles.text, - size !== 'standard' ? getClassNames(styles, 'size', size) : null, + size !== 'body' ? getClassNames(styles, 'size', size) : null, weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null, tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null, lineClampMultipleLines ? styles.lineClamp : null,