{"version":3,"sources":["webpack:///./src/components/banner/index.js","webpack:///./src/@nib/gatsby-theme-mesh-docs/templates/Content.js","webpack:///./content/components/split-section.mdx"],"names":["Banner","React","createElement","Inline","space","Link","component","GatsbyLink","to","GridLayout","styled","div","withConfig","displayName","componentId","breakpoint","BREAKPOINTS","DRAWER","Content","props","Theme","theme","nib","Layout","bannerContent","SkipLink","link","text","Header","Sidebar","location","Target","id","Main","pageContext","children","Footer","propTypes","PropTypes","node","object","_frontmatter","makeShortcode","name","console","warn","mdx","Alert","Copy","layoutProps","MDXLayout","DefaultLayout","MDXContent","_ref","components","_objectWithoutProperties","_excluded","Object","assign","mdxType","parentName","type","title","measure","isMDXComponent"],"mappings":"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","file":"component---content-components-split-section-mdx-f5617ed65b141445be92.js","sourcesContent":["import React from 'react';\nimport {Inline} from '@nib/layout';\nimport Link from '@nib-components/link';\nimport {Link as GatsbyLink} from 'gatsby';\n\nconst Banner = () => (\n  <Inline space={2}>\n    <span>Design Tokens for Mesh have just been released!</span>{' '}\n    <Link component={GatsbyLink} to=\"/design-tokens/overview/\">\n      Check out the design tokens now\n    </Link>\n  </Inline>\n);\n\nexport default Banner;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {breakpoint} from '@nib/layout';\nimport {SkipLink, Target} from '@nib-components/skip-link';\nimport {Footer, Layout, Main, Sidebar} from '@nib/gatsby-theme-mesh-docs';\nimport Theme, {nib} from '@nib-components/theme';\n\nimport Header from '../../../components/header/Header';\nimport {BREAKPOINTS} from '../../../constants';\nimport Banner from '../../../components/banner';\n\nconst GridLayout = styled.div`\n  min-height: 100vh;\n  display: grid;\n  grid-template-areas:\n    'header'\n    'main'\n    'footer';\n  grid-template-rows: 3.5rem 1fr auto;\n  grid-template-columns: 1fr;\n\n  ${breakpoint(BREAKPOINTS.DRAWER)`\n    grid-template-areas:\n      \"header header\"\n      \"sidebar main\"\n      \"sidebar footer\";\n    grid-template-columns: 15rem 1fr;\n  `};\n`;\n\nconst Content = props => {\n  return (\n    <Theme theme={nib}>\n      <Layout bannerContent={<Banner />}>\n        <SkipLink link=\"#content\" text=\"Skip to content\" />\n        <GridLayout>\n          <Header />\n          <Sidebar location={props.location} />\n          <Target id=\"content\" component={Main} pageContext={props.pageContext} location={props.location}>\n            {props.children}\n          </Target>\n          <Footer />\n        </GridLayout>\n      </Layout>\n    </Theme>\n  );\n};\n\nContent.displayName = 'Content';\nContent.propTypes = {\n  children: PropTypes.node,\n  location: PropTypes.object,\n  pageContext: PropTypes.object\n};\n\nexport default Content;\n","import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport DefaultLayout from \"/tmp/node_modules/@nib/gatsby-theme-mesh-docs/src/templates/Content.js\";\nimport { SplitSection } from '@nib/layout';\nimport { LargePlaceholder } from '../../src/components/examples/Placeholder';\nexport const _frontmatter = {};\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};\nconst Alert = makeShortcode(\"Alert\");\nconst Copy = makeShortcode(\"Copy\");\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    <h2 {...{\n      \"id\": \"installation\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#installation\",\n        \"aria-label\": \"installation permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Installation`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-bash\"\n      }}>{`npm install @nib/layout\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"usage\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#usage\",\n        \"aria-label\": \"usage permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Usage`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import {SplitSection} from '@nib/layout';\n`}</code></pre>\n    <Alert type=\"warning\" title=\"Do not style layout components\" mdxType=\"Alert\">\n  You must not apply styled-components to this component as it will interfere with the structure required for the current styling. This is true for all layout components.\n    </Alert>\n    <h2 {...{\n      \"id\": \"interactive-demo\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#interactive-demo\",\n        \"aria-label\": \"interactive demo permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Interactive demo`}</h2>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\",\n        \"metastring\": \"live\",\n        \"live\": true\n      }}>{`<SplitSection padding={8} collapseBelow=\"md\">\n  <SplitSection.Item mode=\"feature\" background=\"default\" color=\"default\">\n    <LargePlaceholder />\n  </SplitSection.Item>\n  <SplitSection.Item mode=\"sage\" background=\"default\" color=\"default\">\n    <LargePlaceholder />\n  </SplitSection.Item>\n</SplitSection>\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"props\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#props\",\n        \"aria-label\": \"props permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Props`}</h2>\n    <h3 {...{\n      \"id\": \"splitsection\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#splitsection\",\n        \"aria-label\": \"splitsection permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`SplitSection`}</h3>\n    <table>\n      <thead parentName=\"table\">\n        <tr parentName=\"thead\">\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Prop`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Type`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Default`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Description`}</th>\n        </tr>\n      </thead>\n      <tbody parentName=\"table\">\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`children`}</inlineCode>{` `}<em parentName=\"td\">{`(required)`}</em></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`node`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The children of the SplitSection layout. Must be a `}<inlineCode parentName=\"td\">{`SplitSection.Item`}</inlineCode>{` component.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`padding`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`number or object`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`{xs: 4, md: 6, lg: 8}`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The padding around the column content. A size from our `}<a parentName=\"td\" {...{\n              \"href\": \"/foundations/spacing/\"\n            }}>{`spacing scale`}</a>{`. Can be made responsive by passing an object of breakpoints. Value(s) must be one of `}<inlineCode parentName=\"td\">{`0...10`}</inlineCode>{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`collapseBelow`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`string`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`A `}<a parentName=\"td\" {...{\n              \"href\": \"/foundations/breakpoints/\"\n            }}>{`breakpoint`}</a>{` value which defines when the horizontal columns structure should collapse to a vertical stack.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`reverse`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`boolean`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Reverse the order of the components inside SplitSection. Can be made responsive by passing an object of breakpoints. Below collapseBelow breakpoints, this doesn't have any effect.`}</td>\n        </tr>\n      </tbody>\n    </table>\n    <Alert type=\"info\" title=\"Reverse Props warning\" mdxType=\"Alert\">\n  <Copy measure={false} mdxType=\"Copy\">\n    Reverse props below the collapseBelow breakpoints, have no effect.\n  </Copy>\n    </Alert>\n    <h3 {...{\n      \"id\": \"splitsectionitem\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#splitsectionitem\",\n        \"aria-label\": \"splitsectionitem permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`SplitSection.Item`}</h3>\n    <p>{`All `}<inlineCode parentName=\"p\">{`Box`}</inlineCode>{` props are valid on this component.`}</p>\n    <table>\n      <thead parentName=\"table\">\n        <tr parentName=\"thead\">\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Prop`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Type`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Default`}</th>\n          <th parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`Description`}</th>\n        </tr>\n      </thead>\n      <tbody parentName=\"table\">\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`children`}</inlineCode>{` `}<em parentName=\"td\">{`(required)`}</em></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`node`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The children to be rendered in the column.`}</td>\n        </tr>\n      </tbody>\n    </table>\n    <h2 {...{\n      \"id\": \"related-components\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#related-components\",\n        \"aria-label\": \"related components permalink\",\n        \"className\": \"anchor before\"\n      }}><svg parentName=\"a\" {...{\n          \"width\": \"16px\",\n          \"height\": \"16px\",\n          \"viewBox\": \"0 0 24 24\",\n          \"version\": \"1.1\",\n          \"xmlns\": \"http://www.w3.org/2000/svg\",\n          \"xmlnsXLink\": \"http://www.w3.org/1999/xlink\"\n        }}>{`\n                `}<g parentName=\"svg\" {...{\n            \"id\": \"Icon/System/Hyperlink\",\n            \"stroke\": \"none\",\n            \"strokeWidth\": \"1\",\n            \"fill\": \"none\",\n            \"fillRule\": \"evenodd\"\n          }}>{`\n                    `}<g parentName=\"g\" {...{\n              \"id\": \"bounding-box\"\n            }}>{`\n                        `}<polygon parentName=\"g\" {...{\n                \"id\": \"shape\",\n                \"points\": \"0 0 24 0 24 24 0 24\"\n              }}></polygon>{`\n                    `}</g>{`\n                    `}<path parentName=\"g\" {...{\n              \"d\": \"M2.97056705,10.5950614 C4.54173031,7.27887278 8.49625508,5.854302 11.8239821,7.40797375 C13.7163188,8.30070362 15.0784176,10.0316702 15.5010931,12.0808775 C15.5847686,12.4865513 15.3237374,12.8832474 14.9180635,12.9669229 C14.5123896,13.0505983 14.1156936,12.7895671 14.0320181,12.3838932 C13.7046432,10.7967205 12.6496566,9.45603463 11.1866976,8.76586164 C8.60932967,7.56252773 5.54399976,8.66677658 4.32696827,11.2355079 L4.32696827,11.2355079 L2.53228159,15.0495337 C1.32882051,17.6273078 2.43304674,20.6930819 4.99986835,21.9096136 C7.57764239,23.1130747 10.6434165,22.0088484 11.8617986,19.4380931 C12.0391957,19.0637896 12.4864375,18.9041655 12.860741,19.0815627 C13.2350445,19.2589598 13.3946687,19.7062016 13.2172715,20.0805051 C11.6455484,23.3968011 7.69067395,24.8212622 4.36139006,23.2669369 C1.0450941,21.6952138 -0.379367033,17.7403393 1.17407024,14.4129359 L1.17407024,14.4129359 Z M10.8106553,3.99447201 C12.3823784,0.678176058 16.3372528,-0.746285079 19.6665996,0.808070034 C22.9820653,2.37977643 24.4063771,6.33358241 22.8538565,9.66074191 L22.8538565,9.66074191 L21.0573195,13.4787014 C19.4855963,16.7949973 15.5307219,18.2194585 12.2029859,16.6658646 C10.5847239,15.9034254 9.34257221,14.5202641 8.75785805,12.8296445 C8.62246787,12.4381826 8.83005498,12.0110847 9.22151682,11.8756945 C9.61297867,11.7403043 10.0400766,11.9478914 10.1754668,12.3393533 C10.6280876,13.6480432 11.5896234,14.718733 12.8399163,15.3078099 C15.4176903,16.5112709 18.4834644,15.4070447 19.7009585,12.8381699 L19.7009585,12.8381699 L21.4955823,9.02427881 C22.698284,6.44679832 21.5941735,3.38185245 19.0280584,2.16536354 C16.4502844,0.961902462 13.3845103,2.06612869 12.1661282,4.63688397 C11.988731,5.01118749 11.5414893,5.17081162 11.1671857,4.99341446 C10.7928822,4.8160173 10.6332581,4.36877553 10.8106553,3.99447201 Z\",\n              \"id\": \"Combined-Shape\",\n              \"fill\": \"#444444\",\n              \"fillRule\": \"nonzero\"\n            }}></path>{`\n                `}</g>{`\n              `}</svg></a>{`Related components`}</h2>\n    <ul>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/columns/\"\n        }}>{`Columns`}</a></li>\n      <li parentName=\"ul\"><a parentName=\"li\" {...{\n          \"href\": \"/components/box/\"\n        }}>{`Box`}</a></li>\n    </ul>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}