{"version":3,"sources":["webpack:///./src/components/banner/index.js","webpack:///./src/@nib/gatsby-theme-mesh-docs/templates/Content.js","webpack:///./content/getting-started/tech-support.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","layoutProps","MDXLayout","DefaultLayout","MDXContent","_ref","components","_objectWithoutProperties","_excluded","mdx","Object","assign","mdxType","parentName","isMDXComponent"],"mappings":"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","file":"component---content-getting-started-tech-support-mdx-d75309368d4b04bf46da.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\";\nexport const _frontmatter = {};\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    <h2 {...{\n      \"id\": \"react\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#react\",\n        \"aria-label\": \"react 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>{`React`}</h2>\n    <p>{`All components are built using `}<a parentName=\"p\" {...{\n        \"href\": \"https://reactjs.org/\"\n      }}>{`React`}</a>{` and is therefore a dependency for Mesh.`}</p>\n    <p>{`We currently have support for `}<a parentName=\"p\" {...{\n        \"href\": \"https://github.com/facebook/react/releases/tag/v18.0.0\"\n      }}>{`Version 18`}</a>{` of React and above.`}</p>\n    <p>{`As version `}<inlineCode parentName=\"p\">{`18`}</inlineCode>{` was released in 2022, we do not maintain support for earlier versions of React.`}</p>\n    <p>{`React `}<a parentName=\"p\" {...{\n        \"href\": \"https://react.dev/blog/2022/03/29/react-v18#how-to-upgrade\"\n      }}>{`Version 18.0.0`}</a>{` introduced no breaking changes in regard to how you work with the Mesh Design System. Please let us know if you have any issues.`}</p>\n    <h2 {...{\n      \"id\": \"styled-components\",\n      \"style\": {\n        \"position\": \"relative\"\n      }\n    }}><a parentName=\"h2\" {...{\n        \"href\": \"#styled-components\",\n        \"aria-label\": \"styled 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>{`Styled Components`}</h2>\n    <p>{`Styled-components is a popular CSS-in-JS library for styling React components using tagged template literals. It allows developers to write actual CSS code to style components, making it easier to manage and maintain styles in large applications.\nThe library has gone through several updates, with version 6 introducing new features and improvements.`}</p>\n    <p>{`However, there are some drawbacks and limitations associated with the latest version, which have led us to sticking with version 5. These issues primarily include:`}</p>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`Integrated Types and Missing Defaults:`}</strong>{` For TypeScript users, the instability and lack of proper type definitions in the latest version can be a significant problem. This can lead to type errors and issues that can be hard to debug and resolve. In version 6, types are integrated directly with styled-components, resulting in the removal of the community-maintained type definitions (@types/styled-components). Additionally, certain default exports are missing, and the version lacks adequate maintenance. For further details, refer to the `}<a parentName=\"p\" {...{\n          \"href\": \"https://github.com/styled-components/styled-components/issues/4062\"\n        }}>{`GitHub issue`}</a>{`.`}</p>\n    </blockquote>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`Unsupported CSS Interpolations:`}</strong>{` CSS interpolations are not supported within the styled function. For more information, see the related `}<a parentName=\"p\" {...{\n          \"href\": \"https://github.com/styled-components/styled-components/issues/4099\"\n        }}>{`GitHub issue`}</a>{`.`}</p>\n    </blockquote>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`Maintenance Issues:`}</strong>{` There have been concerns about the maintenance of the library. Frequent updates, breaking changes, and inadequate communication from the maintainers can cause instability in projects relying on the library.`}</p>\n    </blockquote>\n    <p>{`Given these concerns, `}<strong parentName=\"p\">{`it is suggested to use version 5 of styled-components`}</strong>{` for the time being.`}</p>\n    <p>{`Since the mesh components utilize styled-components version 5, switching to version 6 in your project may result in the following warning:`}</p>\n    <blockquote>\n      <p parentName=\"blockquote\"><strong parentName=\"p\">{`No More Automatic Prop Filtering`}</strong>{`: In styled-components version 5, any props not explicitly defined in a styled component were automatically filtered out before being passed to the underlying HTML element. However, in version 6, this automatic filtering has been removed, and all props will be forwarded to the underlying component or HTML element by default. Consequently, if you pass props that are invalid for the associated HTML element, you may encounter console warnings, as these props will no longer be filtered out automatically.`}</p>\n    </blockquote>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"sourceRoot":""}