main.28378d52.iframe.bundle.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{1002:function(module,exports){},1004:function(module,exports){},1011:function(module,exports){},1030:function(module,exports){},1047:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(413).configure)([__webpack_require__(1048)],module,!1)}).call(this,__webpack_require__(129)(module))},1048:function(module,exports,__webpack_require__){var map={"./stories/Components/Flex/index.stories.mdx":1066,"./stories/Components/Grid/index.stories.mdx":1056,"./stories/Components/Skeleton/index.stories.mdx":1057,"./stories/Components/Spacing/index.stories.mdx":1067,"./stories/Components/Stack/index.stories.mdx":1061,"./stories/Components/Text/index.stories.mdx":1049,"./stories/Styles/Shadows/index.stories.mdx":1062,"./stories/intro.stories.mdx":1051};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=1048},1049:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"preview",(function(){return preview})),__webpack_require__.d(__webpack_exports__,"display",(function(){return display})),__webpack_require__.d(__webpack_exports__,"fontWeight",(function(){return fontWeight})),__webpack_require__.d(__webpack_exports__,"as",(function(){return as}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(1),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(68),_components_Text__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(20),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.b,{title:"components/Text",components:_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h1",{id:"text"},"Text"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"Text")," component is a component that can be easily used anywhere you need to enter text."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h2",{id:"quick-start"},"Quick Start"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"You can use the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"Text")," component without any additional properties."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("code",{parentName:"pre",className:"language-tsx"},"import React from 'react';\nimport { Text } from 'quantumic-design';\n\nfunction Preview() {\n  return <Text>내용을 입력해주세요.</Text>;\n}\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Properties of ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"Text")," component help you avoid declaring a font-related boilerplate CSS styles multiple times like below."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.c,{name:"Preview",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline",mdxType:"Text"},"display: Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{size:24,mdxType:"Text"},"font-size: 24px"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{color:"#48cfad",mdxType:"Text"},"color: #48cfad"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"As you can see, Text component doesn't have any CSS styles associated with the font. Therefore, It will inherit and use CSS styles declared at the root of your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h2",{id:"examples"},"Examples"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h3",{id:"display"},"Display"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.c,{name:"Display",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{mdxType:"Text"},"display: block"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline",mdxType:"Text"},"display: Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline",mdxType:"Text"},"/"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline",mdxType:"Text"},"display: Inline")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h3",{id:"font-weight"},"Font Weight"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.c,{name:"Font Weight",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:"lighter",mdxType:"Text"},"font-weight: lighter"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:200,mdxType:"Text"},"font-weight: 200"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:600,mdxType:"Text"},"font-weight: 600"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:800,mdxType:"Text"},"font-weight: 800"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:"bolder",mdxType:"Text"},"font-weight: bolder"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h3",{id:"as"},"As"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"Text")," component will be rendered as p elements by default. but if you want to render it as other elements, you can use ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"as")," props."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"Canvas"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.c,{name:"As",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"a",href:"https://github.com",target:"blank",mdxType:"Text"},"Anchor"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"h1",mdxType:"Text"},"h1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"button",mdxType:"Text"},"Button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h2",{id:"demo"},"Demo"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("iframe",{src:"https://codesandbox.io/embed/zhi5gs?fontsize=14&module=%2Fsrc%2FApp.tsx",style:{width:"100%",height:"500px",border:"0",borderRadius:"4px",overflow:"hidden"},title:"Text",allow:"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb",sandbox:"allow-modals allow-forms allow-popups allow-scripts allow-same-origin"}))}MDXContent.isMDXComponent=!0;const preview=()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline"},"display: Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{size:24},"font-size: 24px"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{color:"#48cfad"},"color: #48cfad"));preview.storyName="Preview",preview.parameters={storySource:{source:'<Text display="inline">display: Inline</Text>\n<Text size={24}>font-size: 24px</Text>\n<Text color="#48cfad">color: #48cfad</Text>'}};const display=()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,null,"display: block"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("div",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline"},"display: Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline"},"/"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{display:"inline"},"display: Inline")));display.storyName="Display",display.parameters={storySource:{source:'<Text>display: block</Text>\n<div>\n      <Text display="inline">display: Inline</Text>\n      <Text display="inline">/</Text>\n      <Text display="inline">display: Inline</Text>\n    </div>'}};const fontWeight=()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:"lighter"},"font-weight: lighter"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:200},"font-weight: 200"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:600},"font-weight: 600"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:800},"font-weight: 800"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{weight:"bolder"},"font-weight: bolder"));fontWeight.storyName="Font Weight",fontWeight.parameters={storySource:{source:'<Text weight="lighter">font-weight: lighter</Text>\n<Text weight={200}>font-weight: 200</Text>\n<Text weight={600}>font-weight: 600</Text>\n<Text weight={800}>font-weight: 800</Text>\n<Text weight="bolder">font-weight: bolder</Text>'}};const as=()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"a",href:"https://github.com",target:"blank"},"Anchor"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"h1"},"h1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_components_Text__WEBPACK_IMPORTED_MODULE_3__.a,{as:"button"},"Button"));as.storyName="As",as.parameters={storySource:{source:'<Text as="a" href="https://github.com" target="blank">\n      Anchor\n    </Text>\n<Text as="h1">h1</Text>\n<Text as="button">Button</Text>'}};const componentMeta={title:"components/Text",includeStories:["preview","display","fontWeight","as"]},mdxStoryNameToKey={Preview:"preview",Display:"display","Font Weight":"fontWeight",As:"as"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(MDXContent,null))},__webpack_exports__.default=componentMeta},1051:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(0);var _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(1),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(68),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_3__.b,{title:"Quantumic Design/Welcome",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h1",{id:"quantumic-design"},"Quantumic Design"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Quantumic Design is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("a",{parentName:"p",href:"https://reactjs.org/",target:"_blank",rel:"nofollow noopener noreferrer"},"React")," based UI Kit that consists of some tiny components, functions and react hooks."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Most of components in Quantumic Design is designed that have single responsibility. So you can assemble these quantumic components to make your own design system more faster. Or just use these are."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h2",{id:"quick-start"},"Quick start"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Quantumic Design package is published on npm registry. So you can install this with ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"npm")," or ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"yarn"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("code",{parentName:"pre",className:"language-bash"},"$ npm install quantumic-design\n// or\n$ yarn add quantumic-design\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"And add Quantumic Design Context to your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("code",{parentName:"pre",className:"language-tsx"},"// App.tsx\n\nimport React, { PropsWithChildren } from 'react';\nimport { QDProvider } from 'quantumic-design';\n\nfunction App({ children }: PropsWithChildren<{}>) {\n  return <QDProvider>{children}</QDProvider>;\n}\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Quantumic Design never affect anything already implemented in your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Even if ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"QDProvider")," is added to your app, Quantumic Design never affect anything already implemented in your application."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"In other words, it does not include features to normalize or initialize like ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"normalize.css"),", ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"reset.css")," or polyfills. If you need to do these things, you have to implement these on yourself."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("h2",{id:"with-typescript"},"With TypeScript"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("p",null,"Quantumic Design is TypeScript and React based library. Therefore, Quantumic Design provides its own type declarations, so you don't need to install additional typing packages like ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)("inlineCode",{parentName:"p"},"@types/quantumic-design"),"."))}MDXContent.isMDXComponent=!0;const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Quantumic Design/Welcome",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.b)(MDXContent,null))},__webpack_exports__.default=componentMeta},1056:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"preview",(function(){return preview})),__webpack_require__.d(__webpack_exports__,"stretched",(function(){return stretched})),__webpack_require__.d(__webpack_exports__,"directionRow",(function(){return directionRow})),__webpack_require__.d(__webpack_exports__,"directionColumn",(function(){return directionColumn})),__webpack_require__.d(__webpack_exports__,"responsive",(function(){return responsive})),__webpack_require__.d(__webpack_exports__,"variableWidth",(function(){return variableWidth}));var _templateObject,react=__webpack_require__(0),esm=__webpack_require__(1),dist_esm=__webpack_require__(68),esm_extends=__webpack_require__(54),toConsumableArray=__webpack_require__(577),objectWithoutProperties=__webpack_require__(60),mediaQuery=__webpack_require__(256),emotion_react_browser_esm=__webpack_require__(8),_excluded=["as"],sizes=["xl","lg","md","sm","xs"],Column_Column=function Column(_ref,ref){var as=_ref.as,props=Object(objectWithoutProperties.a)(_ref,_excluded),spanStyles=Object(react.useMemo)((function(){return sizes.map((function(size){var sizeValue=props[size];return null==sizeValue?{}:Object(mediaQuery.b)(size,"auto"===sizeValue?{flex:"0 0 auto"}:{flex:"0 0 ".concat(sizeValue/12*100,"%"),width:"".concat(sizeValue/12*100,"%")})}))}),[]),Component=null!=as?as:"div";return Object(emotion_react_browser_esm.c)(Component,Object(esm_extends.a)({ref:ref,css:[{position:"relative",paddingRight:6,paddingLeft:6,flexBasis:0,flexGrow:1,minWidth:0,maxWidth:"100%",boxSizing:"border-box"}].concat(Object(toConsumableArray.a)(spanStyles))},props))},Grid_Column=Object(react.forwardRef)(Column_Column),taggedTemplateLiteral=__webpack_require__(42),Row_excluded=["as","direction","justify","alignItems"],Row_Row=function Row(_ref,ref){var as=_ref.as,_ref$direction=_ref.direction,direction=void 0===_ref$direction?"row":_ref$direction,_ref$justify=_ref.justify,justify=void 0===_ref$justify?"flex-start":_ref$justify,_ref$alignItems=_ref.alignItems,alignItems=void 0===_ref$alignItems?"flex-start":_ref$alignItems,props=Object(objectWithoutProperties.a)(_ref,Row_excluded),Component=null!=as?as:"div";return Object(emotion_react_browser_esm.c)(Component,Object(esm_extends.a)({ref:ref,css:Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n        display: flex;\n        flex-direction: ",";\n        justify-content: ",";\n        align-items: ",";\n        margin: 0 "," 2px;\n        flex-wrap: wrap;\n        box-sizing: 'border-box';\n      "])),direction,justify,alignItems,12)},props))},Grid_Row=Object(react.forwardRef)(Row_Row),Text=__webpack_require__(20),blocks=__webpack_require__(21),columns=[1,2,3,4,5,6,7,8,9,10,11,12],columnStyle={border:"1px solid #339af0",backgroundColor:"#4dabf7",height:100,color:"#f8f9fa",display:"flex",justifyContent:"center",alignItems:"center"};function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"Components/Grid",components:{Column:Grid_Column,Row:Grid_Row},mdxType:"Meta"}),Object(esm.b)("h1",{id:"grid"},"Grid"),Object(esm.b)("p",null,"Many applications today use a grid system to define their layouts."),Object(esm.b)("p",null,"The grid system of Quantumic Design provides 12 grids. And you can handle these with ",Object(esm.b)("inlineCode",{parentName:"p"},"Row")," and ",Object(esm.b)("inlineCode",{parentName:"p"},"Column")," components."),Object(esm.b)("h2",{id:"preview"},"Preview"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Preview",mdxType:"Story"},Object(esm.b)(Grid_Row,{mdxType:"Row"},columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle,xs:1,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column",column))))))),Object(esm.b)("h2",{id:"stretched"},"Stretched"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Stretched",mdxType:"Story"},Object(esm.b)(Grid_Row,{mdxType:"Row"},columns.filter((v=>v%2==0)).map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column",column))))))),Object(esm.b)("h2",{id:"direction"},"Direction"),Object(esm.b)("h3",{id:"row"},"Row"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Direction/Row",mdxType:"Story"},Object(esm.b)(Grid_Row,{direction:"row",mdxType:"Row"},columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column",column))))))),Object(esm.b)("h3",{id:"column"},"Column"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Direction/Column",mdxType:"Story"},Object(esm.b)(Grid_Row,{direction:"column",mdxType:"Row"},columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column",column))))))),Object(esm.b)("h2",{id:"responsive"},"Responsive"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Responsive",mdxType:"Story"},Object(esm.b)(Grid_Row,{mdxType:"Row"},Object(esm.b)(Grid_Column,{lg:8,md:4,xs:2,style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"lg=8 md=4, xs=2")),Object(esm.b)(Grid_Column,{style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"auto")),Object(esm.b)(Grid_Column,{lg:1,md:5,xs:8,style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"lg=1, md=5, xs=8"))))),Object(esm.b)("h2",{id:"variablewidth"},"VariableWidth"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Variable Width",mdxType:"Story"},Object(esm.b)(Grid_Row,{mdxType:"Row"},Object(esm.b)(Grid_Column,{lg:"auto",style:{...columnStyle,width:40},mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"width: 40px")),Object(esm.b)(Grid_Column,{style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column")),Object(esm.b)(Grid_Column,{style:columnStyle,mdxType:"Column"},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"},mdxType:"Text"},"Column"))))))}MDXContent.isMDXComponent=!0;const preview=()=>Object(esm.b)(Grid_Row,null,columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle,xs:1},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column",column)))));preview.storyName="Preview",preview.parameters={storySource:{source:"<Row>\n      {columns.map(column => <Column key={column} style={columnStyle} xs={1}>\n          <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n            Column{column}\n          </Text>\n        </Column>)}\n    </Row>"}};const stretched=()=>Object(esm.b)(Grid_Row,null,columns.filter((v=>v%2==0)).map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column",column)))));stretched.storyName="Stretched",stretched.parameters={storySource:{source:"<Row>\n      {columns.filter(v => v % 2 === 0).map(column => <Column key={column} style={columnStyle}>\n            <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n              Column{column}\n            </Text>\n          </Column>)}\n    </Row>"}};const directionRow=()=>Object(esm.b)(Grid_Row,{direction:"row"},columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column",column)))));directionRow.storyName="Direction/Row",directionRow.parameters={storySource:{source:"<Row direction=\"row\">\n      {columns.map(column => <Column key={column} style={columnStyle}>\n          <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n            Column{column}\n          </Text>\n        </Column>)}\n    </Row>"}};const directionColumn=()=>Object(esm.b)(Grid_Row,{direction:"column"},columns.map((column=>Object(esm.b)(Grid_Column,{key:column,style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column",column)))));directionColumn.storyName="Direction/Column",directionColumn.parameters={storySource:{source:"<Row direction=\"column\">\n      {columns.map(column => <Column key={column} style={columnStyle}>\n          <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n            Column{column}\n          </Text>\n        </Column>)}\n    </Row>"}};const responsive=()=>Object(esm.b)(Grid_Row,null,Object(esm.b)(Grid_Column,{lg:8,md:4,xs:2,style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"lg=8 md=4, xs=2")),Object(esm.b)(Grid_Column,{style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"auto")),Object(esm.b)(Grid_Column,{lg:1,md:5,xs:8,style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"lg=1, md=5, xs=8")));responsive.storyName="Responsive",responsive.parameters={storySource:{source:"<Row>\n      <Column lg={8} md={4} xs={2} style={columnStyle}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          lg=8 md=4, xs=2\n        </Text>\n      </Column>\n      <Column style={columnStyle}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          auto\n        </Text>\n      </Column>\n      <Column lg={1} md={5} xs={8} style={columnStyle}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          lg=1, md=5, xs=8\n        </Text>\n      </Column>\n    </Row>"}};const variableWidth=()=>Object(esm.b)(Grid_Row,null,Object(esm.b)(Grid_Column,{lg:"auto",style:{...columnStyle,width:40}},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"width: 40px")),Object(esm.b)(Grid_Column,{style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column")),Object(esm.b)(Grid_Column,{style:columnStyle},Object(esm.b)(Text.a,{align:"center",style:{width:"100%",backgroundColor:"#1864ab"}},"Column")));variableWidth.storyName="Variable Width",variableWidth.parameters={storySource:{source:"<Row>\n      <Column lg=\"auto\" style={{ ...columnStyle,\n    width: 40\n  }}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          width: 40px\n        </Text>\n      </Column>\n      <Column style={columnStyle}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          Column\n        </Text>\n      </Column>\n      <Column style={columnStyle}>\n        <Text align=\"center\" style={{\n      width: '100%',\n      backgroundColor: '#1864ab'\n    }}>\n          Column\n        </Text>\n      </Column>\n    </Row>"}};const componentMeta={title:"Components/Grid",includeStories:["preview","stretched","directionRow","directionColumn","responsive","variableWidth"]},mdxStoryNameToKey={Preview:"preview",Stretched:"stretched","Direction/Row":"directionRow","Direction/Column":"directionColumn",Responsive:"responsive","Variable Width":"variableWidth"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},1057:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"skeleton",(function(){return skeleton}));var react=__webpack_require__(0),esm=__webpack_require__(1),dist_esm=__webpack_require__(68),esm_extends=__webpack_require__(54),objectWithoutProperties=__webpack_require__(60),slicedToArray=__webpack_require__(578),index_esm=__webpack_require__(576);function calcGradient(_ref){var foregroundColor=_ref.foregroundColor,backgroundColor=_ref.backgroundColor,progress=_ref.progress,width=_ref.width,startPosition=Math.max(progress-width,0),endPosition=Math.min(progress+width,100);return"linear-gradient(".concat(90,"deg, ").concat(backgroundColor," ").concat(startPosition,"%, ").concat(foregroundColor," ").concat(progress,"%, ").concat(backgroundColor," ").concat(endPosition,"%)")}function useAnimateGradient(_ref2){var foregroundColor=_ref2.foregroundColor,backgroundColor=_ref2.backgroundColor,_useState=Object(react.useState)(-200),_useState2=Object(slicedToArray.a)(_useState,2),progress=_useState2[0],setProgress=_useState2[1],updateProgress=Object(react.useCallback)((function(){setProgress((function(prev){return prev>=200?-200:prev+3}))}),[]);return Object(index_esm.a)(updateProgress),calcGradient({foregroundColor:foregroundColor,backgroundColor:backgroundColor,progress:progress,width:30})}try{calcGradient.displayName="calcGradient",calcGradient.__docgenInfo={description:"",displayName:"calcGradient",props:{foregroundColor:{defaultValue:null,description:"",name:"foregroundColor",required:!0,type:{name:"string"}},backgroundColor:{defaultValue:null,description:"",name:"backgroundColor",required:!0,type:{name:"string"}},progress:{defaultValue:null,description:"",name:"progress",required:!0,type:{name:"number"}},width:{defaultValue:null,description:"",name:"width",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Skeleton/useAnimateGradient.tsx#calcGradient"]={docgenInfo:calcGradient.__docgenInfo,name:"calcGradient",path:"src/components/Skeleton/useAnimateGradient.tsx#calcGradient"})}catch(__react_docgen_typescript_loader_error){}try{useAnimateGradient.displayName="useAnimateGradient",useAnimateGradient.__docgenInfo={description:"",displayName:"useAnimateGradient",props:{foregroundColor:{defaultValue:null,description:"",name:"foregroundColor",required:!0,type:{name:"string"}},backgroundColor:{defaultValue:null,description:"",name:"backgroundColor",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Skeleton/useAnimateGradient.tsx#useAnimateGradient"]={docgenInfo:useAnimateGradient.__docgenInfo,name:"useAnimateGradient",path:"src/components/Skeleton/useAnimateGradient.tsx#useAnimateGradient"})}catch(__react_docgen_typescript_loader_error){}var _templateObject,Circle_templateObject,taggedTemplateLiteral=__webpack_require__(42),objectSpread2=__webpack_require__(132),emotion_react_browser_esm=__webpack_require__(8),_excluded=["width","height","backgroundStyle","style"],Rect_Rect=function Rect(_ref){var width=_ref.width,height=_ref.height,backgroundStyle=_ref.backgroundStyle,style=_ref.style,rest=Object(objectWithoutProperties.a)(_ref,_excluded);return Object(emotion_react_browser_esm.c)("div",Object(esm_extends.a)({css:Object(objectSpread2.a)(Object(objectSpread2.a)({},Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n          display: inline-block;\n          width: ","px;\n          height: ","px;\n          background: ",";\n        "])),width,height,backgroundStyle)),style),role:"img"},rest))},Skeleton_Rect=Rect_Rect;try{Rect_Rect.displayName="Rect",Rect_Rect.__docgenInfo={description:"",displayName:"Rect",props:{height:{defaultValue:null,description:"",name:"height",required:!0,type:{name:"number"}},width:{defaultValue:null,description:"",name:"width",required:!0,type:{name:"number"}},backgroundStyle:{defaultValue:null,description:"",name:"backgroundStyle",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Skeleton/Rect.tsx#Rect"]={docgenInfo:Rect_Rect.__docgenInfo,name:"Rect",path:"src/components/Skeleton/Rect.tsx#Rect"})}catch(__react_docgen_typescript_loader_error){}var Circle_excluded=["width","height","backgroundStyle","style"],Circle_Circle=function Circle(_ref){var width=_ref.width,height=_ref.height,backgroundStyle=_ref.backgroundStyle,style=_ref.style,rest=Object(objectWithoutProperties.a)(_ref,Circle_excluded);return Object(emotion_react_browser_esm.c)("div",Object(esm_extends.a)({css:Object(objectSpread2.a)(Object(objectSpread2.a)({},Object(emotion_react_browser_esm.b)(Circle_templateObject||(Circle_templateObject=Object(taggedTemplateLiteral.a)(["\n          display: inline-block;\n          width: ","px;\n          height: ","px;\n          background: ",";\n          border-radius: '50%';\n        "])),width,height,backgroundStyle)),style),role:"img"},rest))},Skeleton_Circle=Circle_Circle;try{Circle_Circle.displayName="Circle",Circle_Circle.__docgenInfo={description:"",displayName:"Circle",props:{height:{defaultValue:null,description:"",name:"height",required:!0,type:{name:"number"}},width:{defaultValue:null,description:"",name:"width",required:!0,type:{name:"number"}},backgroundStyle:{defaultValue:null,description:"",name:"backgroundStyle",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Skeleton/Circle.tsx#Circle"]={docgenInfo:Circle_Circle.__docgenInfo,name:"Circle",path:"src/components/Skeleton/Circle.tsx#Circle"})}catch(__react_docgen_typescript_loader_error){}var Skeleton_excluded=["type","width","height","backgroundColor","foregroundColor"],Skeleton_Skeleton=function Skeleton(_ref){var _ref$type=_ref.type,type=void 0===_ref$type?"rect":_ref$type,width=_ref.width,height=_ref.height,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=void 0===_ref$backgroundColor?"#e9ecef":_ref$backgroundColor,_ref$foregroundColor=_ref.foregroundColor,foregroundColor=void 0===_ref$foregroundColor?"#f1f3f5":_ref$foregroundColor,rest=Object(objectWithoutProperties.a)(_ref,Skeleton_excluded),gradientStyle=useAnimateGradient({foregroundColor:foregroundColor,backgroundColor:backgroundColor});return"rect"===type?Object(emotion_react_browser_esm.c)(Skeleton_Rect,Object(esm_extends.a)({width:width,height:height,backgroundStyle:gradientStyle},rest)):Object(emotion_react_browser_esm.c)(Skeleton_Circle,Object(esm_extends.a)({width:width,height:height,backgroundStyle:gradientStyle},rest))},components_Skeleton=Skeleton_Skeleton;Skeleton_Skeleton.Circle=Skeleton_Circle,Skeleton_Skeleton.Rect=Skeleton_Rect;try{Skeleton_Skeleton.displayName="Skeleton",Skeleton_Skeleton.__docgenInfo={description:"",displayName:"Skeleton",props:{backgroundColor:{defaultValue:{value:"#e9ecef"},description:"",name:"backgroundColor",required:!1,type:{name:"string"}},height:{defaultValue:null,description:"",name:"height",required:!0,type:{name:"number"}},width:{defaultValue:null,description:"",name:"width",required:!0,type:{name:"number"}},type:{defaultValue:{value:"rect"},description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"circle"'},{value:'"rect"'}]}},foregroundColor:{defaultValue:{value:"#f1f3f5"},description:"",name:"foregroundColor",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Skeleton/index.tsx#Skeleton"]={docgenInfo:Skeleton_Skeleton.__docgenInfo,name:"Skeleton",path:"src/components/Skeleton/index.tsx#Skeleton"})}catch(__react_docgen_typescript_loader_error){}var Spacing=__webpack_require__(53),Flex=__webpack_require__(66),blocks=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"components/Skeleton",components:components_Skeleton,mdxType:"Meta"}),Object(esm.b)("h1",{id:"skeleton"},"Skeleton"),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Skeleton")," screens are blank pages that are progressively populated with content, such as text and images, as they become available."),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Skeleton")," components provide a nice user experience while the application is initially loaded. Because users can predict the layout of your application through the ",Object(esm.b)("inlineCode",{parentName:"p"},"Skeleton")," while the content is loading."),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Skeleton")," in Quantumic Design is using pure CSS not SVG, so you can customize easily your skeleton component with CSS."),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Skeleton",mdxType:"Story"},Object(esm.b)(Flex.a,{direction:"column",mdxType:"Flex"},Object(esm.b)(components_Skeleton,{width:50,height:50,type:"circle",mdxType:"Skeleton"}),Object(esm.b)(Spacing.a,{size:10,mdxType:"Spacing"}),Object(esm.b)(components_Skeleton,{width:100,height:20,mdxType:"Skeleton"})))),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-tsx"},'<Skeleton width={50} height={50} type="circle" />\n<Spacing size={10} />\n<Skeleton width={100} height={20} />\n')))}MDXContent.isMDXComponent=!0;const skeleton=()=>Object(esm.b)(Flex.a,{direction:"column"},Object(esm.b)(components_Skeleton,{width:50,height:50,type:"circle"}),Object(esm.b)(Spacing.a,{size:10}),Object(esm.b)(components_Skeleton,{width:100,height:20}));skeleton.storyName="Skeleton",skeleton.parameters={storySource:{source:'<Flex direction="column">\n      <Skeleton width={50} height={50} type="circle" />\n      <Spacing size={10} />\n      <Skeleton width={100} height={20} />\n    </Flex>'}};const componentMeta={title:"components/Skeleton",includeStories:["skeleton"]},mdxStoryNameToKey={Skeleton:"skeleton"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},1059: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}));var _templateObject,client_api=__webpack_require__(76),esm=__webpack_require__(4),react=__webpack_require__(0),taggedTemplateLiteral=__webpack_require__(42),emotion_react_browser_esm=__webpack_require__(8);function QDProvider(_ref){var children=_ref.children;return Object(emotion_react_browser_esm.c)(react.Fragment,null,Object(emotion_react_browser_esm.c)(emotion_react_browser_esm.a,{styles:Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n          body {\n            font-size: 16px;\n            font-family: 'Noto Sans KR', sans-serif;\n          }\n        "])))}),children)}try{QDProvider.displayName="QDProvider",QDProvider.__docgenInfo={description:"",displayName:"QDProvider",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/QDProvider/index.tsx#QDProvider"]={docgenInfo:QDProvider.__docgenInfo,name:"QDProvider",path:"src/components/QDProvider/index.tsx#QDProvider"})}catch(__react_docgen_typescript_loader_error){}var Container_templateObject,esm_extends=__webpack_require__(54),objectWithoutProperties=__webpack_require__(60),mediaQuery=__webpack_require__(256),_excluded=["children","fluid"];function Container(_ref){var children=_ref.children,_ref$fluid=_ref.fluid,fluid=void 0!==_ref$fluid&&_ref$fluid,props=Object(objectWithoutProperties.a)(_ref,_excluded),maxWidth=Object(mediaQuery.a)()?"1200px":fluid?"auto":"none";return Object(emotion_react_browser_esm.c)("div",Object(esm_extends.a)({css:Object(emotion_react_browser_esm.b)(Container_templateObject||(Container_templateObject=Object(taggedTemplateLiteral.a)(["\n        width: 100%;\n        max-width: ",";\n        margin: 0 auto;\n      "])),maxWidth)},props),children)}try{Container.displayName="Container",Container.__docgenInfo={description:"",displayName:"Container",props:{fluid:{defaultValue:{value:"false"},description:"",name:"fluid",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Container/index.tsx#Container"]={docgenInfo:Container.__docgenInfo,name:"Container",path:"src/components/Container/index.tsx#Container"})}catch(__react_docgen_typescript_loader_error){}var decorators=[function(Story){return Object(emotion_react_browser_esm.c)(QDProvider,null,Object(emotion_react_browser_esm.c)(Container,null,Object(emotion_react_browser_esm.c)(Story,null)))}],parameters={options:{storySort:{method:"",order:["Quantumic Design",["Welcome","Getting Started","Usage"],"Styles","Components"],locales:""}}};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.c)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return Object(client_api.d)(loader,!1)}));case"parameters":return Object(client_api.e)(function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}({},value),!1);case"argTypesEnhancers":return value.forEach((function(enhancer){return Object(client_api.a)(enhancer)}));case"argsEnhancers":return value.forEach((function(enhancer){return Object(client_api.b)(enhancer)}));case"render":return Object(client_api.g)(value);case"globals":case"globalTypes":var v={};return v[key]=value,Object(client_api.e)(v,!1);default:return console.log(key+" was not supported :( !")}}))},1061:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"stackHorizontal",(function(){return stackHorizontal})),__webpack_require__.d(__webpack_exports__,"stackVertical",(function(){return stackVertical}));var _templateObject,Components_templateObject,react=__webpack_require__(0),esm=__webpack_require__(1),dist_esm=__webpack_require__(68),esm_extends=__webpack_require__(54),taggedTemplateLiteral=__webpack_require__(42),objectWithoutProperties=__webpack_require__(60),emotion_react_browser_esm=__webpack_require__(8),Flex=__webpack_require__(66),_excluded=["gap"],Stack_Stack=function Stack(_ref,ref){var gap=_ref.gap,rest=Object(objectWithoutProperties.a)(_ref,_excluded);return Object(emotion_react_browser_esm.c)(Flex.a,Object(esm_extends.a)({ref:ref,css:Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n        gap: ","px;\n      "])),gap)},rest))},components_Stack=Object(react.forwardRef)(Stack_Stack);function Box(_ref){var color=_ref.color;return Object(emotion_react_browser_esm.c)("div",{css:Object(emotion_react_browser_esm.b)(Components_templateObject||(Components_templateObject=Object(taggedTemplateLiteral.a)(["\n        width: 100px;\n        height: 100px;\n        background-color: ",";\n      "])),color)})}try{Box.displayName="Box",Box.__docgenInfo={description:"",displayName:"Box",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Components/Stack/Components.tsx#Box"]={docgenInfo:Box.__docgenInfo,name:"Box",path:"src/stories/Components/Stack/Components.tsx#Box"})}catch(__react_docgen_typescript_loader_error){}var blocks=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"components/Stack",components:components_Stack,mdxType:"Meta"}),Object(esm.b)("h1",{id:"stack"},"Stack"),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Stack")," component"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Stack/Horizontal",mdxType:"Story"},Object(esm.b)(components_Stack,{gap:20,mdxType:"Stack"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"}))),Object(esm.b)(blocks.c,{name:"Stack/Vertical",mdxType:"Story"},Object(esm.b)(components_Stack,{gap:20,direction:"column",mdxType:"Stack"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"})))))}MDXContent.isMDXComponent=!0;const stackHorizontal=()=>Object(esm.b)(components_Stack,{gap:20},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));stackHorizontal.storyName="Stack/Horizontal",stackHorizontal.parameters={storySource:{source:'<Stack gap={20}>\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Stack>'}};const stackVertical=()=>Object(esm.b)(components_Stack,{gap:20,direction:"column"},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));stackVertical.storyName="Stack/Vertical",stackVertical.parameters={storySource:{source:'<Stack gap={20} direction="column">\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Stack>'}};const componentMeta={title:"components/Stack",includeStories:["stackHorizontal","stackVertical"]},mdxStoryNameToKey={"Stack/Horizontal":"stackHorizontal","Stack/Vertical":"stackVertical"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},1062:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"shadows",(function(){return index_stories_shadows}));var react=__webpack_require__(0),react_default=__webpack_require__.n(react),esm=__webpack_require__(1),dist_esm=__webpack_require__(68),blocks=__webpack_require__(21),shadows=(__webpack_require__(1050),{0:"none",1:"0px 2px 5px rgba(0, 0, 0, 0.1)",2:"0px 3px 5px rgba(0, 0, 0, 0.1)",3:"0px 6px 10px rgba(0, 0, 0, 0.1)",4:"0px 8px 12px rgba(0, 0, 0, 0.1)",5:"0px 24px 48px rgba(0, 0, 0, 0.1)"}),Shadow_Shadow=function Shadow(_ref){var _ref$level=_ref.level,level=void 0===_ref$level?1:_ref$level,children=_ref.children;return Object(react.cloneElement)(children,{css:[children.props.css,{boxShadow:shadows[level]}]})};try{Shadow_Shadow.displayName="Shadow",Shadow_Shadow.__docgenInfo={description:"",displayName:"Shadow",props:{level:{defaultValue:{value:"1"},description:"",name:"level",required:!1,type:{name:"enum",value:[{value:"0"},{value:"1"},{value:"2"},{value:"3"},{value:"4"},{value:"5"}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Shadow/index.tsx#Shadow"]={docgenInfo:Shadow_Shadow.__docgenInfo,name:"Shadow",path:"src/components/Shadow/index.tsx#Shadow"})}catch(__react_docgen_typescript_loader_error){}var Spacing=__webpack_require__(53),Flex=__webpack_require__(66),emotion_react_browser_esm=__webpack_require__(8),components_Box=function Box(_ref){var children=_ref.children,css=_ref.css;return Object(emotion_react_browser_esm.c)(Flex.a,{direction:"column",css:[{height:80,borderRadius:8,backgroundColor:"#fcfcfd",padding:34},css]},children)};try{components_Box.displayName="Box",components_Box.__docgenInfo={description:"",displayName:"Box",props:{css:{defaultValue:null,description:"",name:"css",required:!0,type:{name:"any"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Styles/Shadows/components.tsx#Box"]={docgenInfo:components_Box.__docgenInfo,name:"Box",path:"src/stories/Styles/Shadows/components.tsx#Box"})}catch(__react_docgen_typescript_loader_error){}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"Styles/Shadows",mdxType:"Meta"}),Object(esm.b)("h1",{id:"shadow"},"Shadow"),Object(esm.b)("p",null,"You can use ",Object(esm.b)("inlineCode",{parentName:"p"},"Shadow")," component when you want to express z-axis in 2D screen."),Object(esm.b)("p",null,"Humans recognize the height of objects according to the shape and outline of the shadow. If shadow is more clearly or smaller, you feel that object is in a low height."),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Shadow")," component provides a 5 level shadow style according to this principle."),Object(esm.b)("p",null,"We recommend to use these predefined shadow levels to create a consistent height hierarchy in all parts of the application."),Object(esm.b)("h1",{id:"preview"},"Preview"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Shadows",mdxType:"Story"},Object(esm.b)(Shadow_Shadow,{level:0,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 0")),Object(esm.b)(Spacing.a,{size:30,mdxType:"Spacing"}),Object(esm.b)(Shadow_Shadow,{level:1,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 1")),Object(esm.b)(Spacing.a,{size:30,mdxType:"Spacing"}),Object(esm.b)(Shadow_Shadow,{level:2,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 2")),Object(esm.b)(Spacing.a,{size:30,mdxType:"Spacing"}),Object(esm.b)(Shadow_Shadow,{level:3,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 3")),Object(esm.b)(Spacing.a,{size:30,mdxType:"Spacing"}),Object(esm.b)(Shadow_Shadow,{level:4,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 4")),Object(esm.b)(Spacing.a,{size:30,mdxType:"Spacing"}),Object(esm.b)(Shadow_Shadow,{level:5,mdxType:"Shadow"},Object(esm.b)(components_Box,{mdxType:"Box"},"Level 5")))))}MDXContent.isMDXComponent=!0;const index_stories_shadows=()=>Object(esm.b)(react_default.a.Fragment,null,Object(esm.b)(Shadow_Shadow,{level:0},Object(esm.b)(components_Box,null,"Level 0")),Object(esm.b)(Spacing.a,{size:30}),Object(esm.b)(Shadow_Shadow,{level:1},Object(esm.b)(components_Box,null,"Level 1")),Object(esm.b)(Spacing.a,{size:30}),Object(esm.b)(Shadow_Shadow,{level:2},Object(esm.b)(components_Box,null,"Level 2")),Object(esm.b)(Spacing.a,{size:30}),Object(esm.b)(Shadow_Shadow,{level:3},Object(esm.b)(components_Box,null,"Level 3")),Object(esm.b)(Spacing.a,{size:30}),Object(esm.b)(Shadow_Shadow,{level:4},Object(esm.b)(components_Box,null,"Level 4")),Object(esm.b)(Spacing.a,{size:30}),Object(esm.b)(Shadow_Shadow,{level:5},Object(esm.b)(components_Box,null,"Level 5")));index_stories_shadows.storyName="Shadows",index_stories_shadows.parameters={storySource:{source:"<Shadow level={0}>\n      <Box>Level 0</Box>\n    </Shadow>\n<Spacing size={30} />\n<Shadow level={1}>\n      <Box>Level 1</Box>\n    </Shadow>\n<Spacing size={30} />\n<Shadow level={2}>\n      <Box>Level 2</Box>\n    </Shadow>\n<Spacing size={30} />\n<Shadow level={3}>\n      <Box>Level 3</Box>\n    </Shadow>\n<Spacing size={30} />\n<Shadow level={4}>\n      <Box>Level 4</Box>\n    </Shadow>\n<Spacing size={30} />\n<Shadow level={5}>\n      <Box>Level 5</Box>\n    </Shadow>"}};const componentMeta={title:"Styles/Shadows",includeStories:["shadows"]},mdxStoryNameToKey={Shadows:"shadows"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},1066:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"flexRow",(function(){return flexRow})),__webpack_require__.d(__webpack_exports__,"flexRowReverse",(function(){return flexRowReverse})),__webpack_require__.d(__webpack_exports__,"flexColumn",(function(){return flexColumn})),__webpack_require__.d(__webpack_exports__,"flexColumnReverse",(function(){return flexColumnReverse}));__webpack_require__(0);var _templateObject,esm=__webpack_require__(1),dist_esm=__webpack_require__(68),Flex=__webpack_require__(66),taggedTemplateLiteral=__webpack_require__(42),emotion_react_browser_esm=__webpack_require__(8);function Box(_ref){var color=_ref.color;return Object(emotion_react_browser_esm.c)("div",{css:Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n        width: 100px;\n        height: 100px;\n        background-color: ",";\n      "])),color)})}try{Box.displayName="Box",Box.__docgenInfo={description:"",displayName:"Box",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Components/Flex/Components.tsx#Box"]={docgenInfo:Box.__docgenInfo,name:"Box",path:"src/stories/Components/Flex/Components.tsx#Box"})}catch(__react_docgen_typescript_loader_error){}var blocks=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"components/Flex",components:Flex.a,mdxType:"Meta"}),Object(esm.b)("h1",{id:"flex"},"Flex"),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Flex")," component"),Object(esm.b)("h2",{id:"direction"},"Direction"),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Flex/Row",mdxType:"Story"},Object(esm.b)(Flex.a,{mdxType:"Flex"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"}))),Object(esm.b)(blocks.c,{name:"Flex/Row Reverse",mdxType:"Story"},Object(esm.b)(Flex.a,{gutter:20,direction:"row-reverse",mdxType:"Flex"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"}))),Object(esm.b)(blocks.c,{name:"Flex/Column",mdxType:"Story"},Object(esm.b)(Flex.a,{gutter:20,direction:"column",mdxType:"Flex"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"}))),Object(esm.b)(blocks.c,{name:"Flex/Column Reverse",mdxType:"Story"},Object(esm.b)(Flex.a,{gutter:20,direction:"column-reverse",mdxType:"Flex"},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"})))))}MDXContent.isMDXComponent=!0;const flexRow=()=>Object(esm.b)(Flex.a,null,Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));flexRow.storyName="Flex/Row",flexRow.parameters={storySource:{source:'<Flex>\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Flex>'}};const flexRowReverse=()=>Object(esm.b)(Flex.a,{gutter:20,direction:"row-reverse"},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));flexRowReverse.storyName="Flex/Row Reverse",flexRowReverse.parameters={storySource:{source:'<Flex gutter={20} direction="row-reverse">\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Flex>'}};const flexColumn=()=>Object(esm.b)(Flex.a,{gutter:20,direction:"column"},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));flexColumn.storyName="Flex/Column",flexColumn.parameters={storySource:{source:'<Flex gutter={20} direction="column">\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Flex>'}};const flexColumnReverse=()=>Object(esm.b)(Flex.a,{gutter:20,direction:"column-reverse"},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Box,{color:"#9775fa"}));flexColumnReverse.storyName="Flex/Column Reverse",flexColumnReverse.parameters={storySource:{source:'<Flex gutter={20} direction="column-reverse">\n      <Box color="#f783ac" />\n      <Box color="#da77f2" />\n      <Box color="#9775fa" />\n    </Flex>'}};const componentMeta={title:"components/Flex",includeStories:["flexRow","flexRowReverse","flexColumn","flexColumnReverse"]},mdxStoryNameToKey={"Flex/Row":"flexRow","Flex/Row Reverse":"flexRowReverse","Flex/Column":"flexColumn","Flex/Column Reverse":"flexColumnReverse"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},1067:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"spacing",(function(){return spacing}));__webpack_require__(0);var _templateObject,esm=__webpack_require__(1),dist_esm=__webpack_require__(68),Spacing=__webpack_require__(53),taggedTemplateLiteral=__webpack_require__(42),emotion_react_browser_esm=__webpack_require__(8);function Box(_ref){var color=_ref.color;return Object(emotion_react_browser_esm.c)("div",{css:Object(emotion_react_browser_esm.b)(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n        width: 100px;\n        height: 100px;\n        background-color: ",";\n      "])),color)})}try{Box.displayName="Box",Box.__docgenInfo={description:"",displayName:"Box",props:{color:{defaultValue:null,description:"",name:"color",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/Components/Spacing/Components.tsx#Box"]={docgenInfo:Box.__docgenInfo,name:"Box",path:"src/stories/Components/Spacing/Components.tsx#Box"})}catch(__react_docgen_typescript_loader_error){}var blocks=__webpack_require__(21);function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.b)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.b)(blocks.b,{title:"components/Spacing",components:Spacing.a,mdxType:"Meta"}),Object(esm.b)("h1",{id:"spacing"},"Spacing"),Object(esm.b)("p",null,Object(esm.b)("inlineCode",{parentName:"p"},"Spacing")," component is used when you want to create margins between elements."),Object(esm.b)("p",null,"Maybe your components would have been designed to focus to control some business-related states and render it. In this cases, spacing is not the responsibility of your component."),Object(esm.b)("p",null,"Now you can delegate this responsibility to ",Object(esm.b)("inlineCode",{parentName:"p"},"Spacing")," component and your custom components can just focus to handle states."),Object(esm.b)("pre",null,Object(esm.b)("code",{parentName:"pre",className:"language-tsx"},"<div />\n<Spacing size={10} />\n<div />\n<Spacing size={10} />\n<div />\n")),Object(esm.b)(blocks.a,{mdxType:"Canvas"},Object(esm.b)(blocks.c,{name:"Spacing",mdxType:"Story"},Object(esm.b)("div",{style:{display:"flex",flexDirection:"column"}},Object(esm.b)(Box,{color:"#f783ac",mdxType:"Box"}),Object(esm.b)(Spacing.a,{size:10,mdxType:"Spacing"}),Object(esm.b)(Box,{color:"#da77f2",mdxType:"Box"}),Object(esm.b)(Spacing.a,{size:10,mdxType:"Spacing"}),Object(esm.b)(Box,{color:"#9775fa",mdxType:"Box"})))))}MDXContent.isMDXComponent=!0;const spacing=()=>Object(esm.b)("div",{style:{display:"flex",flexDirection:"column"}},Object(esm.b)(Box,{color:"#f783ac"}),Object(esm.b)(Spacing.a,{size:10}),Object(esm.b)(Box,{color:"#da77f2"}),Object(esm.b)(Spacing.a,{size:10}),Object(esm.b)(Box,{color:"#9775fa"}));spacing.storyName="Spacing",spacing.parameters={storySource:{source:'<div style={{\n  display: \'flex\',\n  flexDirection: \'column\'\n}}>\n      <Box color="#f783ac" />\n      <Spacing size={10} />\n      <Box color="#da77f2" />\n      <Spacing size={10} />\n      <Box color="#9775fa" />\n    </div>'}};const componentMeta={title:"components/Spacing",includeStories:["spacing"]},mdxStoryNameToKey={Spacing:"spacing"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.b)(dist_esm.a,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.b)(MDXContent,null))};__webpack_exports__.default=componentMeta},20:function(module,__webpack_exports__,__webpack_require__){"use strict";var _templateObject,_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(54),_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(42),_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(60),_emotion_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(8),react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(0),_excluded=["display","lineHeight","weight","size","color","align","as","children"],Text=function Text(_ref,ref){var display=_ref.display,lineHeight=_ref.lineHeight,weight=_ref.weight,size=_ref.size,color=_ref.color,align=_ref.align,as=_ref.as,children=_ref.children,props=Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__.a)(_ref,_excluded),Component=null!=as?as:"p";return Object(_emotion_react__WEBPACK_IMPORTED_MODULE_3__.c)(Component,Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__.a)({ref:ref,role:"text",css:Object(_emotion_react__WEBPACK_IMPORTED_MODULE_3__.b)(_templateObject||(_templateObject=Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_1__.a)(["\n        display: ",";\n        font-weight: ",";\n        line-height: ",";\n        font-size: ",";\n        color: ",";\n        text-align: ",";\n      "])),display,weight,lineHeight,"string"==typeof size?size:"".concat(size,"px"),color,align)},props),children)};__webpack_exports__.a=Object(react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)(Text)},256:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return isMatchedSM})),__webpack_require__.d(__webpack_exports__,"b",(function(){return mediaQuery}));var _home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(257),_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(132),breakpoints={xs:0,sm:576,md:768,lg:992,xl:1200};function isMatchMinWidth(key){return null==window?null:window.matchMedia("screen and (min-width: ".concat(breakpoints[key],"px)")).matches}function isMatchedSM(){return!isMatchMinWidth("sm")}function mediaQuery(size,style){return Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__.a)({},"@media screen and (min-width: ".concat(breakpoints[size],"px)"),Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_1__.a)({},style))}},53:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",(function(){return Spacing}));var _templateObject,_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(42),_emotion_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(8),Spacing=function Spacing(_ref){var size=_ref.size;return Object(_emotion_react__WEBPACK_IMPORTED_MODULE_1__.c)("div",{css:Object(_emotion_react__WEBPACK_IMPORTED_MODULE_1__.b)(_templateObject||(_templateObject=Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0__.a)(["\n        height: ","px;\n      "])),size)})};try{Spacing.displayName="Spacing",Spacing.__docgenInfo={description:"",displayName:"Spacing",props:{size:{defaultValue:null,description:"",name:"size",required:!0,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Spacing/index.tsx#Spacing"]={docgenInfo:Spacing.__docgenInfo,name:"Spacing",path:"src/components/Spacing/index.tsx#Spacing"})}catch(__react_docgen_typescript_loader_error){}},598:function(module,exports,__webpack_require__){__webpack_require__(599),__webpack_require__(760),__webpack_require__(761),__webpack_require__(1058),__webpack_require__(1052),__webpack_require__(1063),__webpack_require__(1060),__webpack_require__(1064),__webpack_require__(1053),__webpack_require__(1065),__webpack_require__(1054),__webpack_require__(1055),__webpack_require__(952),__webpack_require__(1046),__webpack_require__(1059),module.exports=__webpack_require__(1047)},66:function(module,__webpack_exports__,__webpack_require__){"use strict";var _templateObject,_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(54),_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(42),_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(60),_emotion_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(8),react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(0),_excluded=["direction","align","justify","children","as"],Flex=function Flex(_ref,ref){var _ref$direction=_ref.direction,direction=void 0===_ref$direction?"row":_ref$direction,_ref$align=_ref.align,align=void 0===_ref$align?"flex-start":_ref$align,_ref$justify=_ref.justify,justify=void 0===_ref$justify?"flex-start":_ref$justify,children=_ref.children,as=_ref.as,rest=Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__.a)(_ref,_excluded),Component=null!=as?as:"div";return Object(_emotion_react__WEBPACK_IMPORTED_MODULE_3__.c)(Component,Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_extends__WEBPACK_IMPORTED_MODULE_0__.a)({ref:ref,css:Object(_emotion_react__WEBPACK_IMPORTED_MODULE_3__.b)(_templateObject||(_templateObject=Object(_home_runner_work_quantumic_design_quantumic_design_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_1__.a)(["\n        display: flex;\n        flex-direction: ",";\n        align-items: ",";\n        justify-content: ",";\n      "])),direction,align,justify)},rest),children)};__webpack_exports__.a=Object(react__WEBPACK_IMPORTED_MODULE_4__.forwardRef)(Flex)},666:function(module,exports){},761:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(413)},957:function(module,exports){},959:function(module,exports){},969:function(module,exports){},971:function(module,exports){},996:function(module,exports){},997:function(module,exports){}},[[598,3,4]]]);