component---docs-layout-space-mdx-8641b47bdde97820bee6.js.map

{"version":3,"sources":["webpack:///../docs/layout/space.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","__position","__code","__scope","Playground","Space","directionBlockStyle","margin","padding","flex","border","alignBlockStyle","grayStyle","display","background","size","style","marginBottom","direction","flexWrap","align","isMDXComponent"],"mappings":"igBAQO,IAAMA,EAAe,Q,uMAE5B,IAKMC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,MAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,YAACJ,EAAD,KAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,iBAAQ,CACN,GAAM,SADR,SAGA,YAAC,IAAD,CAAYC,WAAY,EAAGC,OAAQ,00EAA+1EC,SAAO,GACv4EJ,QACAH,kBACAQ,eACAC,WAJu4E,gBAKv4ET,IALu4E,EAMv4EH,eANu4E,GAOt4EO,QAAQ,eACZ,WACK,IAAMM,EAAsB,CAC1BC,OAAQ,EACRC,QAAS,EACTC,KAAM,OACNC,OAAQ,kBAEJC,EAAkB,CACtBJ,OAAQ,UACRC,QAAS,EACTC,KAAM,OACNC,OAAQ,kBAEJE,EAAY,CAChBC,QAAS,eACTL,QAAS,gBACTM,WAAY,QAEd,OAAO,gCACP,uBACE,YAAC,IAAD,CAAOC,KAAK,KAAKf,QAAQ,SACvB,+BACA,8BACA,6BAGJ,uBACE,YAAC,IAAD,CAAOe,KAAK,KAAKf,QAAQ,SACvB,gCACA,8BACA,6BAGJ,uBACE,YAAC,IAAD,CAAOe,KAAK,KAAKf,QAAQ,SACvB,+BACA,8BACA,6BAGJ,uBACE,YAAC,IAAD,CAAOe,KAAM,IAAKf,QAAQ,SACxB,oCACA,8BACA,6BAGJ,mBAAKgB,MAAO,CACRC,aAAc,KAEhB,YAAC,IAAD,CAAOC,UAAU,aAAalB,QAAQ,SACpC,mBAAKgB,MAAOV,GAAZ,SACA,mBAAKU,MAAOV,GAAZ,gBAGJ,uBACE,YAAC,IAAD,CAAOY,UAAU,WAAWlB,QAAQ,SAClC,mBAAKgB,MAAOV,GAAZ,SACA,mBAAKU,MAAOV,GAAZ,cAGJ,mBAAKU,MAAO,CACRG,SAAU,OACVN,QAAS,SAEX,mBAAKG,MAAOL,GACV,YAAC,IAAD,CAAOS,MAAM,SAASpB,QAAQ,SAA9B,SAEE,qCACA,oBAAMgB,MAAOJ,GAAb,WAGJ,mBAAKI,MAAOL,GACV,YAAC,IAAD,CAAOS,MAAM,QAAQpB,QAAQ,SAA7B,QAEE,qCACA,oBAAMgB,MAAOJ,GAAb,WAGJ,mBAAKI,MAAOL,GACV,YAAC,IAAD,CAAOS,MAAM,MAAMpB,QAAQ,SAA3B,MAEE,qCACA,oBAAMgB,MAAOJ,GAAb,WAGJ,mBAAKI,MAAOL,GACV,YAAC,IAAD,CAAOS,MAAM,WAAWpB,QAAQ,SAAhC,WAEE,qCACA,oBAAMgB,MAAOJ,GAAb,sB,qMAWdf,EAAWwB,gBAAiB","file":"component---docs-layout-space-mdx-8641b47bdde97820bee6.js","sourcesContent":["import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/Users/alwu/Desktop/new coding stuff/fiber/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nimport { Playground } from 'docz';\nimport { Space } from 'fiber';\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return <div {...props} />;\n};\n\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n    <h1 {...{\n      \"id\": \"space\"\n    }}>{`Space`}</h1>\n    <Playground __position={0} __code={'() => {\\n  const directionBlockStyle = {\\n    margin: 0,\\n    padding: 4,\\n    flex: \\'none\\',\\n    border: \\'1px solid blue\\',\\n  }\\n  const alignBlockStyle = {\\n    margin: \\'8px 4px\\',\\n    padding: 4,\\n    flex: \\'none\\',\\n    border: \\'1px solid blue\\',\\n  }\\n  const grayStyle = {\\n    display: \\'inline-block\\',\\n    padding: \\'32px 8px 16px\\',\\n    background: \\'gray\\',\\n  }\\n  return (\\n    <>\\n      <div>\\n        <Space size=\\\"sm\\\">\\n          <h1>Small</h1>\\n          <h1>Size</h1>\\n          <h1>!</h1>\\n        </Space>\\n      </div>\\n      <div>\\n        <Space size=\\\"md\\\">\\n          <h1>Middle</h1>\\n          <h1>Size</h1>\\n          <h1>!</h1>\\n        </Space>\\n      </div>\\n      <div>\\n        <Space size=\\\"lg\\\">\\n          <h1>Large</h1>\\n          <h1>Size</h1>\\n          <h1>!</h1>\\n        </Space>\\n      </div>\\n      <div>\\n        <Space size={100}>\\n          <h1>Number 100</h1>\\n          <h1>Size</h1>\\n          <h1>!</h1>\\n        </Space>\\n      </div>\\n      <div style={{ marginBottom: 10 }}>\\n        <Space direction=\\\"horizontal\\\">\\n          <div style={directionBlockStyle}>HELLO</div>\\n          <div style={directionBlockStyle}>HORIZONTAL</div>\\n        </Space>\\n      </div>\\n      <div>\\n        <Space direction=\\\"vertical\\\">\\n          <div style={directionBlockStyle}>HELLO</div>\\n          <div style={directionBlockStyle}>VERTICAL</div>\\n        </Space>\\n      </div>\\n      <div style={{ flexWrap: \\'wrap\\', display: \\'flex\\' }}>\\n        <div style={alignBlockStyle}>\\n          <Space align=\\\"center\\\">\\n            center\\n            <button>Primary</button>\\n            <span style={grayStyle}>Block</span>\\n          </Space>\\n        </div>\\n        <div style={alignBlockStyle}>\\n          <Space align=\\\"start\\\">\\n            start\\n            <button>Primary</button>\\n            <span style={grayStyle}>Block</span>\\n          </Space>\\n        </div>\\n        <div style={alignBlockStyle}>\\n          <Space align=\\\"end\\\">\\n            end\\n            <button>Primary</button>\\n            <span style={grayStyle}>Block</span>\\n          </Space>\\n        </div>\\n        <div style={alignBlockStyle}>\\n          <Space align=\\\"baseline\\\">\\n            baseline\\n            <button>Primary</button>\\n            <span style={grayStyle}>Block</span>\\n          </Space>\\n        </div>\\n      </div>\\n    </>\\n  )\\n}'} __scope={{\n      props,\n      DefaultLayout,\n      Playground,\n      Space,\n      DefaultLayout,\n      _frontmatter\n    }} mdxType=\"Playground\">\n  {() => {\n        const directionBlockStyle = {\n          margin: 0,\n          padding: 4,\n          flex: 'none',\n          border: '1px solid blue'\n        };\n        const alignBlockStyle = {\n          margin: '8px 4px',\n          padding: 4,\n          flex: 'none',\n          border: '1px solid blue'\n        };\n        const grayStyle = {\n          display: 'inline-block',\n          padding: '32px 8px 16px',\n          background: 'gray'\n        };\n        return <>\n        <div>\n          <Space size='sm' mdxType=\"Space\">\n            <h1>Small</h1>\n            <h1>Size</h1>\n            <h1>!</h1>\n          </Space>\n        </div>\n        <div>\n          <Space size='md' mdxType=\"Space\">\n            <h1>Middle</h1>\n            <h1>Size</h1>\n            <h1>!</h1>\n          </Space>\n        </div>\n        <div>\n          <Space size='lg' mdxType=\"Space\">\n            <h1>Large</h1>\n            <h1>Size</h1>\n            <h1>!</h1>\n          </Space>\n        </div>\n        <div>\n          <Space size={100} mdxType=\"Space\">\n            <h1>Number 100</h1>\n            <h1>Size</h1>\n            <h1>!</h1>\n          </Space>\n        </div>\n        <div style={{\n            marginBottom: 10\n          }}>\n          <Space direction='horizontal' mdxType=\"Space\">\n            <div style={directionBlockStyle}>HELLO</div>\n            <div style={directionBlockStyle}>HORIZONTAL</div>\n          </Space>\n        </div>\n        <div>\n          <Space direction='vertical' mdxType=\"Space\">\n            <div style={directionBlockStyle}>HELLO</div>\n            <div style={directionBlockStyle}>VERTICAL</div>\n          </Space>\n        </div>\n        <div style={{\n            flexWrap: 'wrap',\n            display: 'flex'\n          }}>\n          <div style={alignBlockStyle}>\n            <Space align='center' mdxType=\"Space\">\n              center\n              <button>Primary</button>\n              <span style={grayStyle}>Block</span>\n            </Space>\n          </div>\n          <div style={alignBlockStyle}>\n            <Space align='start' mdxType=\"Space\">\n              start\n              <button>Primary</button>\n              <span style={grayStyle}>Block</span>\n            </Space>\n          </div>\n          <div style={alignBlockStyle}>\n            <Space align='end' mdxType=\"Space\">\n              end\n              <button>Primary</button>\n              <span style={grayStyle}>Block</span>\n            </Space>\n          </div>\n          <div style={alignBlockStyle}>\n            <Space align='baseline' mdxType=\"Space\">\n              baseline\n              <button>Primary</button>\n              <span style={grayStyle}>Block</span>\n            </Space>\n          </div>\n        </div>\n      </>;\n      }}\n    </Playground>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}