{"version":3,"sources":["webpack:///./src/components/banner/index.js","webpack:///./content/components/theme.mdx","webpack:///./src/@nib/gatsby-theme-mesh-docs/templates/Content.js"],"names":["Banner","React","createElement","Inline","space","Link","component","GatsbyLink","to","_frontmatter","makeShortcode","name","props","console","warn","mdx","Alert","Copy","layoutProps","MDXLayout","DefaultLayout","MDXContent","_ref","components","_objectWithoutProperties","_excluded","Object","assign","mdxType","type","title","parentName","ColorShowcase","isMDXComponent","GridLayout","styled","div","withConfig","displayName","componentId","breakpoint","BREAKPOINTS","DRAWER","Content","Theme","theme","nib","Layout","bannerContent","SkipLink","link","text","Header","Sidebar","location","Target","id","Main","pageContext","children","Footer","propTypes","PropTypes","node","object"],"mappings":"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","file":"component---content-components-theme-mdx-49ee7a39e84e614f61ed.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 * 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 Theme, { nib, gu, iman } from '@nib-components/theme';\nimport { PrimaryButton, SecondaryButton } from '@nib-components/button';\nimport ColorShowcase from '../../src/components/theme/ColorShowcase.js';\nimport { Link as GatsbyLink } from 'gatsby';\nimport Link from '@nib-components/link';\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    <Alert type=\"info\" title=\"Components must be wrapped by this Theme\" mdxType=\"Alert\">\n  Our components rely on being rendered inside this Theme component, otherwise they will render with incorrect styling, no responsive styling or worse, break completely.\n    </Alert>\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-components/theme\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 Theme, {nib} from '@nib-components/theme';\n\nconst App = () => (\n  <Theme theme={nib}>\n    {children}\n  </Theme>\n);\n`}</code></pre>\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      }}>{`// Try changing the theme to gu or iman\n<Theme theme={nib}>\n  <Inline space={4}>\n    <PrimaryButton>Primary Button</PrimaryButton>\n    <SecondaryButton>Secondary Button</SecondaryButton>\n  </Inline>\n</Theme>\n`}</code></pre>\n    <h3 {...{\n      \"id\": \"requirements-for-use\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#requirements-for-use\",\n        \"aria-label\": \"requirements for use 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>{`Requirements for use`}</h3>\n    <p>{`There are two requirements which prevent problems with individual components rendering incorrectly:`}</p>\n    <ol>\n      <li parentName=\"ol\">{`You should always include the `}<inlineCode parentName=\"li\">{`Theme`}</inlineCode>{` component once, at the root of your app.`}</li>\n      <li parentName=\"ol\">{`Never should an nib component be rendered outside of the `}<inlineCode parentName=\"li\">{`Theme`}</inlineCode>{` component.`}</li>\n    </ol>\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    <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\">{`theme`}</inlineCode>{` `}<em parentName=\"td\">{`(required)`}</em></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`object`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The brand theme to use. Must be one of `}{`[`}<inlineCode parentName=\"td\">{`nib`}</inlineCode>{`, `}<inlineCode parentName=\"td\">{`gu`}</inlineCode>{`, `}<inlineCode parentName=\"td\">{`iman`}</inlineCode>{`]`}{`.`}</td>\n        </tr>\n        <tr parentName=\"tbody\">\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`mode`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`object`}</td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}><inlineCode parentName=\"td\">{`{form: 'light'}`}</inlineCode></td>\n          <td parentName=\"tr\" {...{\n            \"align\": \"left\"\n          }}>{`The value of `}<inlineCode parentName=\"td\">{`mode.form`}</inlineCode>{` will override the `}<inlineCode parentName=\"td\">{`theme.mode.form`}</inlineCode>{` value in the theme passed down to all styled components via the `}<inlineCode parentName=\"td\">{`ThemeProvider`}</inlineCode>{`. Must have shape: `}<inlineCode parentName=\"td\">{`{form: oneOf(['light', 'white'])}`}</inlineCode>{`.`}</td>\n        </tr>\n      </tbody>\n    </table>\n    <h2 {...{\n      \"id\": \"selectors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#selectors\",\n        \"aria-label\": \"selectors 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>{`Selectors`}</h2>\n    <p>{`Our components look to our theme for a lot of their styling information. Navigating the theme tree structure to find the value that you need can be tiresome. It also requires you to know the structure of the theme.`}</p>\n    <p>{`Selectors offer a shorthand to pull values from the theme. Below is a comparison between the two methods. As you can see, the selector pattern simplifies the process significantly. These selectors are mapped to every section of the theme and their values can differ based on the theme brand.`}</p>\n    <p>{`Navigating the theme structure:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`const Heading = styled.h1\\`\n  font-family: \\${props => props.theme.headings.h1.fontFamily};\n  font-size: \\${props => props.theme.headings.h1.fontSize};\n  color: \\${props => props.theme.colors.shades.darkest};\n\\`;\n`}</code></pre>\n    <p>{`Using theme selectors:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`import {h1FontFamily, h1FontSize, colorDarkest} from '@nib-components/theme';\n\nconst Heading = styled.h1\\`\n  font-family: \\${h1FontFamily};\n  font-size: \\${h1FontSize};\n  color: \\${colorDarkest};\n\\`;\n`}</code></pre>\n    <p>{`For the full list of selectors provided by the theme, see the `}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/nib-group/design-system/blob/master/packages/theme/src/selectors/README.md\"\n      }}>{`selectors documentation`}</a>{`.`}</p>\n    <h3 {...{\n      \"id\": \"using-selectors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#using-selectors\",\n        \"aria-label\": \"using selectors 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>{`Using selectors`}</h3>\n    <p>{`These selectors are used by our design system components and should also be used for in-app styling.`}</p>\n    <p>{`Selectors should be used over the chained navigation of the theme to find the value you desire for simplicity, code readability and to protect against breakage if the theme's structure changes.`}</p>\n    <h3 {...{\n      \"id\": \"color-selectors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#color-selectors\",\n        \"aria-label\": \"color selectors 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>{`Color selectors`}</h3>\n    <Alert type=\"warning\" title=\"Color selectors are deprecated\" mdxType=\"Alert\">\n  <Copy mdxType=\"Copy\">With the introduction of design tokens, color selectors are considered deprecated. They will continue to work but do not source their values from tokens, and as such will not respond to their surrounding mode.</Copy>\n  \n  <Copy mdxType=\"Copy\">This is because these color selectors are not semantic and therefore would be difficult to point to a token as a sensible default value.</Copy>\n  <Copy mdxType=\"Copy\">\n  <Link component={GatsbyLink} to=\"/design-tokens/overview/\" mdxType=\"Link\">See tokens documentation</Link> for more\n  information.\n  </Copy>\n    </Alert>\n    <p>{`The most useful selectors are those that provide the colors used by the theme. These color selectors are:`}</p>\n    <p><strong parentName=\"p\">{`Brand:`}</strong></p>\n    <ul>\n      <li parentName=\"ul\">{`base: `}<inlineCode parentName=\"li\">{`colorBrandBase`}</inlineCode></li>\n      <li parentName=\"ul\">{`light: `}<inlineCode parentName=\"li\">{`colorBrandLight`}</inlineCode></li>\n      <li parentName=\"ul\">{`dark: `}<inlineCode parentName=\"li\">{`colorBrandDark`}</inlineCode></li>\n    </ul>\n    <p><strong parentName=\"p\">{`Accent:`}</strong></p>\n    <ul>\n      <li parentName=\"ul\">{`accent: `}<inlineCode parentName=\"li\">{`colorAccent`}</inlineCode></li>\n    </ul>\n    <p><strong parentName=\"p\">{`Shades:`}</strong></p>\n    <ul>\n      <li parentName=\"ul\">{`black: `}<inlineCode parentName=\"li\">{`colorBlack`}</inlineCode></li>\n      <li parentName=\"ul\">{`darkest: `}<inlineCode parentName=\"li\">{`colorDarkest`}</inlineCode></li>\n      <li parentName=\"ul\">{`darker: `}<inlineCode parentName=\"li\">{`colorDarker`}</inlineCode></li>\n      <li parentName=\"ul\">{`dark: `}<inlineCode parentName=\"li\">{`colorDark`}</inlineCode></li>\n      <li parentName=\"ul\">{`light: `}<inlineCode parentName=\"li\">{`colorLight`}</inlineCode></li>\n      <li parentName=\"ul\">{`lighter: `}<inlineCode parentName=\"li\">{`colorLighter`}</inlineCode></li>\n      <li parentName=\"ul\">{`lightest: `}<inlineCode parentName=\"li\">{`colorLightest`}</inlineCode></li>\n      <li parentName=\"ul\">{`white: `}<inlineCode parentName=\"li\">{`colorWhite`}</inlineCode></li>\n    </ul>\n    <p><strong parentName=\"p\">{`Product:`}</strong></p>\n    <ul>\n      <li parentName=\"ul\">{`hospital: `}<inlineCode parentName=\"li\">{`colorHospital`}</inlineCode></li>\n      <li parentName=\"ul\">{`extras: `}<inlineCode parentName=\"li\">{`colorExtras`}</inlineCode></li>\n      <li parentName=\"ul\">{`combined: `}<inlineCode parentName=\"li\">{`colorCombined`}</inlineCode></li>\n      <li parentName=\"ul\">{`hightlightBg: `}<inlineCode parentName=\"li\">{`colorHighlightBg`}</inlineCode></li>\n      <li parentName=\"ul\">{`hightlightText: `}<inlineCode parentName=\"li\">{`colorHighlightText`}</inlineCode></li>\n    </ul>\n    <h3 {...{\n      \"id\": \"focus-state-selectors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#focus-state-selectors\",\n        \"aria-label\": \"focus state selectors 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>{`Focus state selectors`}</h3>\n    <p>{`We provide selectors for our standard focus styling across each brand. These selectors are:`}</p>\n    <ul>\n      <li parentName=\"ul\">{`outlineColor: `}<inlineCode parentName=\"li\">{`focusOutlineColor`}</inlineCode></li>\n      <li parentName=\"ul\">{`outlineStyle: `}<inlineCode parentName=\"li\">{`focusOutlineStyle`}</inlineCode></li>\n      <li parentName=\"ul\">{`outlineWidth: `}<inlineCode parentName=\"li\">{`focusOutlineWidth`}</inlineCode></li>\n      <li parentName=\"ul\">{`outlineOffset: `}<inlineCode parentName=\"li\">{`focusOutlineOffset`}</inlineCode></li>\n    </ul>\n    <p>{`These can be used to add our standard styling to the focus state of custom components:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`&:focus-visible {\n  outline: \\${focusOutlineWidth} \\${focusOutlineStyle} \\${focusOutlineColor};\n  outline-offset: \\${focusOutlineOffset};\n}\n`}</code></pre>\n    <p>{`We also provide an equivalent shorthand utility for applying a standard focus style to interactive elements:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-jsx\"\n      }}>{`&:focus-visible {\n  \\${standardFocusStyleDeclarations};\n}\n`}</code></pre>\n    <h2 {...{\n      \"id\": \"whitelabelling\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#whitelabelling\",\n        \"aria-label\": \"whitelabelling 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>{`Whitelabelling`}</h2>\n    <p>{`Pulling styling information from the theme helps us to keep our pages consistent and provides us the added benefit of being able to swap out different themes to support multiple brands.`}</p>\n    <p>{`Currently, we have themes to support the following brands:`}</p>\n    <ul>\n      <li parentName=\"ul\">{`nib (`}<inlineCode parentName=\"li\">{`nib`}</inlineCode>{`)`}</li>\n      <li parentName=\"ul\">{`GU Health (`}<inlineCode parentName=\"li\">{`gu`}</inlineCode>{`)`}</li>\n      <li parentName=\"ul\">{`IMAN (`}<inlineCode parentName=\"li\">{`iman`}</inlineCode>{`)`}</li>\n    </ul>\n    <h3 {...{\n      \"id\": \"colors\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h3\" {...{\n        \"href\": \"#colors\",\n        \"aria-label\": \"colors 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>{`Colors`}</h3>\n    <p>{`Each whitelabelled theme has a set of colors that are suitable for key uses across each brand. Pulling color directly from the theme ensures that it will work across all brands, as the colors housed within the theme are more limited but referred to by universal names.`}</p>\n    <ColorShowcase mdxType=\"ColorShowcase\" />\n    <h2 {...{\n      \"id\": \"modeprovider\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#modeprovider\",\n        \"aria-label\": \"modeprovider 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>{`ModeProvider`}</h2>\n    <p>{`In `}<inlineCode parentName=\"p\">{`v7.0.0`}</inlineCode>{` a new `}<inlineCode parentName=\"p\">{`ModeProvider`}</inlineCode>{` component was introduced to allow for the setting of a mode for a subtree of components.`}</p>\n    <p>{`Check out the `}<a parentName=\"p\" {...{\n        \"href\": \"/components/mode-provider/\"\n      }}>{`ModeProvider docs`}</a>{` for usage and guidelines.`}</p>\n    <h2 {...{\n      \"id\": \"token\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#token\",\n        \"aria-label\": \"token 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>{`token`}</h2>\n    <p>{`A `}<em parentName=\"p\">{`\"token getter\"`}</em>{` function. The `}<inlineCode parentName=\"p\">{`token`}</inlineCode>{` function is typed to enable autocomplete and typescript errors when invalid token paths are provided.`}</p>\n    <p>{`The `}<inlineCode parentName=\"p\">{`token`}</inlineCode>{` function has a second parameter to provide a fallback value if the token cannot be found for whatever reason. During the initial migration to tokens it is recommended that fallbacks be provided for all token references. The fallback can be a string or a selector:`}</p>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-tsx\"\n      }}>{`import {token, colorWhite} from '@nib-components/theme';\n\nconst Component = styled.div\\`\n  background-color: \\${token('theme.color.bg.surface', colorWhite)};\n  color: \\${token('theme.color.fg', '#444')};\n  padding: \\${token('common.dimension.spacing.4', '1rem')};\n\\`;\n`}</code></pre>\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/mode-provider/\"\n        }}>{`ModeProvider`}</a></li>\n    </ul>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\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"],"sourceRoot":""}