[
  {
    "path": ".circleci/config.yml",
    "content": "# Javascript Node CircleCI 2.0 configuration file\n#\n# Check https://circleci.com/docs/2.0/language-javascript/ for more details\n#\nversion: 2\njobs:\n  build:\n    docker:\n      # specify the version you desire here\n      - image: circleci/node:10\n\n      # Specify service dependencies here if necessary\n      # CircleCI maintains a library of pre-built images\n      # documented at https://circleci.com/docs/2.0/circleci-images/\n      # - image: circleci/mongo:3.4.4\n\n    working_directory: ~/repo\n\n    steps:\n      - checkout\n\n      # Download and cache dependencies\n      - restore_cache:\n          keys:\n            - v1-dependencies-{{ checksum \"package.json\" }}\n            # fallback to using the latest cache if no exact match is found\n            - v1-dependencies-\n\n      - run: yarn install\n\n      - save_cache:\n          paths:\n            - node_modules\n          key: v1-dependencies-{{ checksum \"package.json\" }}\n\n      # run tests!\n      - run: yarn test\n"
  },
  {
    "path": ".eslintignore",
    "content": "node_modules\ndist\nbuild\n.next\nartifacts\n.cache\npublic\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\ncoverage\n.cache\npublic\n"
  },
  {
    "path": ".npmignore",
    "content": "src\ntest\nbabel.config.js\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\nnode_js:\n  - 10\nscript:\n  - yarn test --coverage\nafter_success:\n  - yarn cover\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "\n# Changelog\n\n## Unreleased\n\n- Update dependencies\n\n## 4.0.7 2019-10-28\n\n- Add missing `heading` variant to `Heading` #754\n\n## 4.0.6 2019-09-21\n\n- Update dependencies\n- Add layout package\n- Add Slider and Switch to forms package\n\n## 4.0.5 2019-08-21\n\n- Fix publish\n\n## 4.0.4 2019-08-21\n\n- Add bundler setup & build for `@rebass/forms/styled-system`\n\n## 4.0.3 2019-08-18\n\n- Add forms package\n- Update dependencies\n\n## 4.0.2 2019-08-07\n## 4.0.1 2019-08-06\n\n- Fix ignore files\n- Adjust build\n- Update dependencies\n\n## 4.0.0 2019-08-04\n\n- New [`sx` prop](https://rebassjs.org/props/#sx-prop) for theme-based styles\n- Use the `css` prop for un-themed, raw CSS values\n- No additional Babel configuration required for the `sx` or `css` props\n- Use the `sx` prop in MDX documents\n- Built-in support for themeable component [variants](https://rebassjs.org/variants)\n- Fully compatible with [Theme UI](https://theme-ui.com)\n\n### Breaking Changes\n\n- The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead.\n- The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead.\n- The `@rebass/grid` package has been renamed (back to) `reflexbox`\n- Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight.\n- Button no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`\n- Image no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`\n- Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles.\n- Card no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`,\n\n\n## [3.1.0] 2019-03-23\n\n- Update to Styled System v4\n\n## [3.0.1] 2019-01-18\n\n- Update styled-system #555\n\n## [3.0.0] 2018-12-01\n\n- Reduced package size\n- Reduced number of components to 8\n- Updated for Styled Components v4 and Emotion v10\n- Reduced dependencies\n- Removed default theme and colors\n- Removed Provider component\n- Added variant theme support for Button and Card components\n- Removed `is` prop in favor of Styled Components' and Emotion's `as` prop\n- Uses Box component as base for all other components\n- Removed `css` prop in favor of Styled Components' and Emotion's implementations\n\n## [3.0.0-12] 2018-11-29\n\n- Removes `css` prop in favor of babel-plugin-styled-components\n- Adds build setup for Emotion 10\n\n## [3.0.0-11] 2018-11-13\n\n- Update dependencies\n\n## [3.0.0-10] 2018-11-12\n\n- Sets `box-sizing: border-box` on base Box component\n\n## [3.0.0-9] 2018-09-22\n\n- Adds flexbox props back to Box component\n\n## [3.0.0-6] 2018-09-13\n\n- Adds emotion package\n\n## [3.0.0-2] 2018-09-11\n\n- Update styled-system\n- Update docs\n\n## [3.0.0-1] 2018-09-10\n\n- Update docs for v3\n\n## [3.0.0-0] 2018-09-08\n\n- Smaller package\n- Reduced number of components to 8\n- Upgraded for styled-components v4\n- Reduced dependencies to one\n- Removed default theme and colors\n- Removed Rebass Provider component\n- Added variant theme support to Button and Card\n- Removed `is` prop in favor of styled-components `as` prop\n- Uses Box component as the base for all other components\n\n## [2.3.2] 2018-09-08\n\n- Update repo in package.json\n- Update readme\n\n## [2.3.1] 2018-09-08\n\n- Fix bad prepublish build\n\n## [2.3.0] 2018-09-08\n\n- Upgrade to @rebass/components, @rebass/grid, and styled-system v3\n\n## [2.2.0] 2018-09-08\n\n- Use `polished` for color manipulation instead of `chroma-js`\n\n## [2.1.1] 2018-09-08\n\n- Support `width` prop on Card\n- Update docs\n\n## [2.1.0] 2018-08-14\n\n- Add Hide component\n\n## [2.0.1] 2018-06-30\n\n- Add `fontFamily` to Heading and Text components\n- Update docs\n\n## [2.0.0] 2018-06-24\n\n### Added\n\n- Support for [emotion][emotion]\n\n### Changed\n\n- [styled-system](https://github.com/jxnblk/styled-system) v2\n- [grid-styled](https://github.com/jxnblk/grid-styled) v4\n- Moves components to separate modules\n- Uses [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components)\n- Updates docs site\n\n#### Breaking\n\n- Renamed components\n  - TabItem -> Tab\n  - DotButton -> Dot\n  - PanelHeader -> Panel.Header\n  - PanelFooter -> Panel.Footer\n- Default theme (changed to match styled-system)\n  - The `colors` object no longer uses Palx\n  - Array color values have been removed\n  - `radius` has been replaced with `radii`\n  - `font` has been replaced with `fonts`\n  - `monospace` has been removed\n  - Theme fields are no longer exposed as exports\n- Props\n  - `width` is only available on Flex and Box\n  - `fontSize` is only available on typographic components\n  - `direction` is now `flexDirection`\n  - Flex `align` is now `alignItems`\n  - Flex `justify` is now `justifyContent`\n  - Flex `wrap` is now `flexWrap`\n  - Arrow `up` is now `direction='up'`\n  - `active` props have been removed in favor of custom styles\n  - Border now uses [styled-system border props](https://github.com/jxnblk/styled-system#borders)\n  - Banner `image` is now `backgroundImage`\n  - Absolute, Fixed, Relative, and Sticky now require values for `top`, `right`, `bottom`, and `left` props\n  - Drawer `position` prop has been renamed to `side`\n  - Drawer `size` prop has been replaced with `width` and `height` props\n\n### Removed\n\n- Custom HOC `hoc`\n- `createLibrary` function\n- `util`\n- `createComponent`\n- Palx dependency\n- ScrollCarousel component\n- CarouselSlide component\n- Star comonent\n\n\n[emotion]: https://github.com/emotion-js/emotion\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at jxnblk@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "\n# Contributing\n\nIssues and pull requests are welcome.\n\nPlease **be nice** and read the following before contributing.\n\n- Test before submitting pull requests - `npm test`\n\n## Codebase Overview\n\nFolders:\n- `/src` source code\n- `/tests` tests, including snapshots\n\nBe sure to familiarize yourself with [styled-system](https://github.com/jxnblk/styled-system) before making changes.\n\nPlease ensure to test any new code added, and update snapshots when relevant.\n"
  },
  {
    "path": "LICENSE.md",
    "content": "\n# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n"
  },
  {
    "path": "babel.config.js",
    "content": "module.exports = {\n  presets: [\n    '@babel/preset-env',\n    '@babel/preset-react'\n  ],\n  env: {\n    esm: {\n      presets: [\n        [\n          '@babel/preset-env',\n          {\n            modules: false,\n          }\n        ]\n      ],\n    },\n    styled: {\n      plugins: [\n        [\n          'transform-rename-import', {\n            original: '^reflexbox$',\n            replacement: 'reflexbox/styled-components',\n          }\n        ]\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "examples/sandbox/README.md",
    "content": "\nOpen in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox)\n"
  },
  {
    "path": "examples/sandbox/package.json",
    "content": "{\n  \"name\": \"rebass-sandbox\",\n  \"private\": true,\n  \"version\": \"4.0.7\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"react-scripts start\"\n  },\n  \"dependencies\": {\n    \"@rebass/preset\": \"^4.0.5\",\n    \"emotion-theming\": \"^10.0.14\",\n    \"react\": \"^16.9.0\",\n    \"react-dom\": \"^16.9.0\",\n    \"rebass\": \"^4.0.7\",\n    \"styled-components\": \"^4.3.2\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/sandbox/src/index.js",
    "content": "/* eslint no-unused-vars: 0 */\nimport React from 'react'\nimport { render } from 'react-dom'\nimport preset from '@rebass/preset'\nimport { ThemeProvider } from 'emotion-theming'\n// OR import { ThemeProvider } from 'styled-components'\nimport {\n  Box,\n  Flex,\n  Heading,\n  Text,\n  Button,\n  Link,\n  Image,\n  Card,\n} from 'rebass'\n// OR use 'rebass/styled-components'\n\nconst theme = {\n  ...preset,\n}\n\nconst App = props => {\n  return (\n    <ThemeProvider theme={theme}>\n      <Box variant='styles.root'>\n        <Heading as='h1' mb={4}>\n          Rebass Sandbox\n        </Heading>\n        <Button variant='primary' mr={3}>\n          Beep\n        </Button>\n        <Button variant='outline'>\n          Boop\n        </Button>\n      </Box>\n    </ThemeProvider>\n  )\n}\n\nrender(<App />, root) // eslint-disable-line no-undef\n"
  },
  {
    "path": "examples/styled-components/README.md",
    "content": "\nOpen in [Code Sandbox](https://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/styled-components)\n"
  },
  {
    "path": "examples/styled-components/package.json",
    "content": "{\n  \"name\": \"@rebass/styled-components-example\",\n  \"private\": true,\n  \"version\": \"4.0.7\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"react-scripts start\"\n  },\n  \"dependencies\": {\n    \"@rebass/preset\": \"^4.0.5\",\n    \"react\": \"^16.9.0\",\n    \"react-dom\": \"^16.9.0\",\n    \"react-scripts\": \"^3.1.1\",\n    \"rebass\": \"^4.0.7\",\n    \"styled-components\": \"^4.3.2\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/styled-components/src/index.js",
    "content": "/* eslint no-unused-vars: 0 */\nimport React from 'react'\nimport { render } from 'react-dom'\nimport preset from '@rebass/preset'\nimport { ThemeProvider } from 'styled-components'\nimport {\n  Box,\n  Flex,\n  Heading,\n  Text,\n  Button,\n  Link,\n  Image,\n  Card,\n} from 'rebass/styled-components'\n\nconst theme = {\n  ...preset,\n}\n\nconst App = props => {\n  return (\n    <ThemeProvider theme={theme}>\n      <Box variant='styles.root'>\n        <Heading as='h1' mb={4}>\n          Rebass Sandbox\n        </Heading>\n        <Button variant='primary' mr={3}>\n          Beep\n        </Button>\n        <Button variant='outline'>\n          Boop\n        </Button>\n      </Box>\n    </ThemeProvider>\n  )\n}\n\nrender(<App />, root) // eslint-disable-line no-undef\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n  \"version\": \"4.0.7\",\n  \"npmClient\": \"yarn\",\n  \"useWorkspaces\": true,\n  \"packages\": [\n    \"packages/*\"\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"workspaces\": [\n    \"packages/*\",\n    \"examples/*\"\n  ],\n  \"scripts\": {\n    \"prepare\": \"lerna run prepare\",\n    \"start\": \"yarn workspace docs start\",\n    \"build\": \"yarn workspace docs build\",\n    \"test\": \"jest\",\n    \"cover\": \"npx codecov\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.5.5\",\n    \"@babel/core\": \"^7.5.5\",\n    \"@babel/preset-env\": \"^7.5.5\",\n    \"@babel/preset-react\": \"^7.0.0\",\n    \"@testing-library/react\": \"^10.0.4\",\n    \"jest\": \"^25.2.4\",\n    \"jest-emotion\": \"^10.0.14\",\n    \"jest-styled-components\": \"^6.3.3\",\n    \"lerna\": \"^3.16.4\",\n    \"react\": \"^16.8.6\",\n    \"react-dom\": \"^16.8.6\",\n    \"react-test-renderer\": \"^16.8.6\"\n  },\n  \"resolutions\": {\n    \"@mdx-js/react\": \"^1.5.5\"\n  },\n  \"jest\": {\n    \"testMatch\": [\n      \"**/packages/**/test/*.js\"\n    ],\n    \"testPathIgnorePatterns\": [\n      \"/node_modules/\"\n    ],\n    \"coverageReporters\": [\n      \"lcov\",\n      \"text\",\n      \"html\"\n    ],\n    \"collectCoverageFrom\": [\n      \"packages/**/src/*.js\",\n      \"!packages/docs/**/*.js\"\n    ],\n    \"coverageThreshold\": {\n      \"global\": {\n        \"branches\": 90,\n        \"functions\": 90,\n        \"lines\": 90,\n        \"statements\": 90\n      }\n    },\n    \"setupFilesAfterEnv\": [],\n    \"snapshotSerializers\": [\n      \"jest-emotion\"\n    ]\n  }\n}\n"
  },
  {
    "path": "packages/bundler/index.js",
    "content": "#!/usr/bin/env node\nconst execa = require('execa')\n\nconst babel = (env, ...args) => {\n  return execa('babel', [\n    '--verbose',\n    ...args.filter(Boolean),\n    '--root-mode=upward',\n  ], {\n    stdio: 'inherit',\n    env: {\n      NODE_ENV: env,\n    }\n  })\n}\n\nbabel(null, 'src', '-d', 'dist')\nbabel('esm', 'src', '-o', 'dist/index.esm.js')\nbabel('styled', 'src', '-d', 'styled-components')\n"
  },
  {
    "path": "packages/bundler/package.json",
    "content": "{\n  \"name\": \"@rebass/bundler\",\n  \"version\": \"4.0.5\",\n  \"bin\": {\n    \"rebass-bundler\": \"./index.js\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@babel/cli\": \"^7.5.5\",\n    \"@babel/core\": \"^7.5.5\",\n    \"@babel/preset-env\": \"^7.5.5\",\n    \"@babel/preset-react\": \"^7.0.0\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/docs/.eslintrc.js",
    "content": "module.exports = {\n  globals: {\n    __PATH_PREFIX__: true,\n  },\n  extends: 'react-app',\n}\n"
  },
  {
    "path": "packages/docs/gatsby-browser.js",
    "content": "export { wrapPageElement } from './src'\n"
  },
  {
    "path": "packages/docs/gatsby-config.js",
    "content": "const remarkPlugins = [\n  require('remark-slug'),\n]\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-plugin-mdx',\n      options: {\n        extensions: ['.mdx', '.md'],\n        remarkPlugins,\n      }\n    },\n    'gatsby-plugin-catch-links',\n    'gatsby-plugin-theme-ui',\n    'gatsby-plugin-react-helmet',\n  ],\n}\n"
  },
  {
    "path": "packages/docs/gatsby-ssr.js",
    "content": "export { wrapPageElement } from './src'\n"
  },
  {
    "path": "packages/docs/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"docs\",\n  \"version\": \"4.0.7\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"gatsby develop\",\n    \"clean\": \"gatsby clean\",\n    \"build\": \"gatsby build\",\n    \"serve\": \"gatsby serve\",\n    \"icon\": \"npx repng src/components/icon.js -d static -f icon.png -w 512 -h 512\",\n    \"card\": \"npx repng src/components/twitter-card.js -d static -f card.png -w 1024 -h 512\"\n  },\n  \"dependencies\": {\n    \"@jxnblk/react-live\": \"^2.1.2-1\",\n    \"@mdx-js/mdx\": \"^1.1.4\",\n    \"@rebass/forms\": \"^4.0.6\",\n    \"@rebass/layout\": \"^4.0.6\",\n    \"@rebass/preset\": \"^4.0.5\",\n    \"@rebass/preset-material\": \"^4.0.5\",\n    \"@rebass/space\": \"^4.0.5\",\n    \"@theme-ui/presets\": \"^0.3.0\",\n    \"@theme-ui/prism\": \"^0.3.0\",\n    \"@theme-ui/sidenav\": \"^0.3.1\",\n    \"countries-list\": \"^2.4.3\",\n    \"deepmerge\": \"^4.0.0\",\n    \"gatsby\": \"^2.13.48\",\n    \"gatsby-plugin-catch-links\": \"^2.1.2\",\n    \"gatsby-plugin-mdx\": \"^1.0.22\",\n    \"gatsby-plugin-react-helmet\": \"^3.1.3\",\n    \"gatsby-plugin-theme-ui\": \"^0.3.0\",\n    \"react\": \"^16.8.6\",\n    \"react-dom\": \"^16.8.6\",\n    \"react-helmet\": \"^6.0.0\",\n    \"rebass\": \"^4.0.7\",\n    \"remark-slug\": \"^5.1.2\",\n    \"theme-ui\": \"^0.3.1\"\n  }\n}\n"
  },
  {
    "path": "packages/docs/src/components/blocks.js",
    "content": "import React from 'react'\nimport { Box } from 'rebass'\n\nexport const Container = props =>\n  <Box\n    {...props}\n    sx={{\n      maxWidth: 'wide',\n      mx: 'auto',\n      px: 4,\n    }}\n  />\n\nexport const Banner = props =>\n  <Box\n    {...props}\n    sx={{\n      color: 'background',\n      bg: 'text',\n    }}>\n    <Box\n      sx={{\n        // '*': { outline: '1px solid rgba(0, 255, 255, 0.5)', },\n        display: 'flex',\n        flexDirection: 'column',\n        maxWidth: 'wide',\n        minHeight: 'calc(100vh - 64px)',\n        mx: 'auto',\n        px: 4,\n        py: [4, 5],\n        h1: {\n          variant: 'text.caps',\n          fontSize: 3,\n        },\n        pre: {\n          p: 0,\n          mb: 0,\n          bg: 'transparent',\n        }\n      }}>\n      {props.children}\n    </Box>\n  </Box>\n\nexport const LogoGrid = props =>\n  <Box\n    {...props}\n    sx={{\n      display: 'grid',\n      gridGap: 3,\n      gridTemplateColumns: [\n        'auto',\n        'auto',\n        '1fr 2fr 1fr',\n      ],\n      alignItems: 'center',\n    }}\n  />\n\nexport const Grid = ({\n  width = 256,\n  gap = 4,\n  ...props\n}) =>\n  <Box\n    {...props}\n    sx={{\n      ul: {\n        listStyle: 'none',\n        p: 0,\n        display: 'grid',\n        gridGap: gap,\n        gridTemplateColumns: [\n          'auto',\n          `repeat(auto-fit, minmax(${width}px, 1fr))`,\n        ]\n      },\n      ...props.sx\n    }}\n  />\n\nexport const NavGrid = props =>\n  <Box\n    {...props}\n    sx={{\n      ul: {\n        listStyle: 'none',\n        p: 0,\n        display: 'grid',\n        gridGap: 3,\n        gridTemplateRows: [\n          `repeat(8, 1fr)`,\n          `repeat(4, 1fr)`,\n        ],\n        gridTemplateColumns: [\n          'repeat(2, 1fr)',\n          'repeat(4, 1fr)',\n        ],\n        gridAutoFlow: 'column',\n        counterReset: 'nav-grid',\n      },\n      li: {\n        fontWeight: 'bold',\n        fontSize: 0,\n        variant: 'text.caps',\n        counterIncrement: 'nav-grid',\n        '::before': {\n          content: 'counter(nav-grid)',\n          display: 'inline-block',\n          width: 16,\n          pr: [1, 2, 3],\n        }\n      },\n      a: {\n        color: 'inherit',\n        textDecoration: 'none',\n        transition: 'color .2s ease-out',\n        ':hover,:focus': {\n          color: 'primary',\n        }\n      }\n    }}\n  />\n\n"
  },
  {
    "path": "packages/docs/src/components/code.js",
    "content": "import React from 'react'\nimport styled from '@emotion/styled'\nimport {\n  LiveProvider,\n  LivePreview,\n  LiveEditor,\n  LiveError,\n} from '@jxnblk/react-live'\nimport { ThemeProvider } from 'theme-ui'\nimport Prism from '@theme-ui/prism'\nimport * as Rebass from 'rebass'\nimport * as RebassForms from '@rebass/forms'\nimport * as RebassLayout from '@rebass/layout'\nimport { Flex, Box } from 'rebass'\nimport { countries } from 'countries-list'\n\nconst scope = {\n  ...Rebass,\n  ...RebassForms,\n  ...RebassLayout,\n  ThemeProvider,\n  props: {\n    image: 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20',\n    countries,\n  }\n}\n\nscope.Switch = props => {\n  const [active, setActive] = React.useState(true)\n  const toggle = () => setActive(!active)\n\n  return (\n    <RebassForms.Switch\n      checked={active}\n      onClick={toggle}\n      {...props}\n    />\n  )\n}\n\nconst transformCode = code => `<>${code}</>`\n\nconst Preview = ({ fullwidth, ...props }) =>\n  <Box\n    as={LivePreview}\n    {...props}\n    sx={{\n      p: fullwidth ? 0 : 3,\n    }}\n  />\n\nconst Editor = props =>\n  <Box\n    {...props}\n    as={LiveEditor}\n    sx={{\n      variant: 'styles.pre',\n      outline: 'none',\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n    }}\n  />\n\nconst Err = props =>\n  <Box\n    {...props}\n    as={LiveError}\n    sx={{\n      fontFamily: 'monospace',\n      fontSize: 1,\n      p: 3,\n      overflowX: 'auto',\n      color: 'white',\n      bg: 'red',\n    }}\n  />\n\nexport default ({\n  className,\n  ...props\n}) => {\n  const lang = 'jsx'\n\n  if (props.preview) {\n    const code = props.children\n    return (\n      <LiveProvider\n        {...props}\n        code={code}\n        transformCode={transformCode}\n        scope={scope}>\n        <Preview fullwidth />\n      </LiveProvider>\n    )\n  }\n\n  if (props.live) {\n    const code = props.children\n    return (\n      <Box\n        sx={{\n          mb: 4,\n          border: t => `1px solid ${t.colors.muted}`,\n          borderRadius: 2,\n        }}>\n        <LiveProvider\n          {...props}\n          code={code}\n          transformCode={transformCode}\n          scope={scope}>\n          <Preview />\n          <Box\n            sx={{\n              position: 'relative',\n            }}>\n            <Editor\n              className={className}\n            />\n            <Err />\n            <Box\n              sx={{\n                position: 'absolute',\n                zIndex: 1,\n                top: 0,\n                right: 0,\n                m: 1,\n                variant: 'text.caps',\n                fontSize: 0,\n                fontWeight: 'bold',\n                color: 'accent',\n              }}>\n              Live Demo\n            </Box>\n          </Box>\n        </LiveProvider>\n      </Box>\n    )\n  }\n\n  return (\n    <Prism\n      {...props}\n      className={className}\n    />\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/demo-provider.js",
    "content": "import React, { useState } from 'react'\nimport { ThemeProvider } from 'theme-ui'\nimport { Helmet } from 'react-helmet'\nimport { Box, Flex } from 'rebass'\nimport * as themeui from '@theme-ui/presets'\nimport merge from 'lodash.merge'\nimport rebass from '@rebass/preset'\nimport material from '@rebass/preset-material'\n\nconst presets = {\n  ...themeui,\n  rebass,\n  material,\n}\n\nconst themes = [\n  'rebass',\n  'material',\n  ...Object.keys(presets)\n]\n\nexport default props => {\n  const [ theme, setTheme ] = useState('preset')\n\n  const demoTheme = merge({}, rebass, presets[theme])\n\n  return (\n    <div>\n      {demoTheme.googleFonts && (\n        <Helmet>\n          <link rel='stylesheet' href={demoTheme.googleFonts} />\n        </Helmet>\n      )}\n      <Flex mb={4}>\n        <Box as='label'>\n          Theme:\n          {' '}\n          <select\n            id='theme'\n            name='theme'\n            value={theme}\n            onChange={e => {\n              setTheme(e.target.value)\n            }}>\n            {themes.map(name => (\n              <option key={name}>{name}</option>\n            ))}\n          </select>\n        </Box>\n      </Flex>\n      <ThemeProvider theme={demoTheme}>\n        {props.children}\n      </ThemeProvider>\n    </div>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/edit-link.js",
    "content": "import React from 'react'\nimport { Location } from '@reach/router'\nimport { Link } from 'rebass'\n\nconst base = 'https://github.com/rebassjs/rebass/edit/master/packages/docs/src/pages'\n\nconst getHREF = (location) => {\n  if (location.pathname === '/') return false\n  return base + location.pathname.replace(/\\/+$/, '') + '.mdx'\n}\n\nexport default props =>\n  <Location\n    children={({ location }) => {\n      const href = getHREF(location)\n      if (!href) return false\n\n      return (\n        <Link\n          {...props}\n          href={href}\n          sx={{\n            display: 'inline-block',\n            color: 'inherit',\n            fontSize: 1,\n          }}\n        />\n      )\n    }}\n  />\n"
  },
  {
    "path": "packages/docs/src/components/footer.js",
    "content": "import React from 'react'\nimport {\n  Box,\n  Flex,\n  Link,\n} from 'rebass'\n\nexport default props =>\n  <Box\n    as='footer'\n    py={5}\n    color='background'\n    bg='text'\n  >\n    <Box\n      sx={{\n        maxWidth: 'wide',\n        mx: 'auto',\n        px: 3,\n      }}>\n      <Link href='/' variant='nav'>Rebass</Link>\n      <Link href='/reflexbox' variant='nav'>Reflexbox</Link>\n      <Link href='/getting-started' variant='nav'>Docs</Link>\n      <Link href='https://github.com/rebassjs/rebass' variant='nav'>GitHub</Link>\n    </Box>\n  </Box>\n"
  },
  {
    "path": "packages/docs/src/components/head.js",
    "content": "import React from 'react'\nimport { Helmet } from 'react-helmet'\nimport pkg from 'rebass/package.json'\n\nexport default props => {\n  const title = [props.title, 'Rebass'].filter(Boolean).join(' | ')\n\n  return (\n    <Helmet\n      htmlAttributes={{\n        lang: 'en-us',\n      }}>\n      <title>{title}</title>\n      <link rel='icon' href='/icon.png' />\n      <meta name='description' content={pkg.description} />\n      <meta name='twitter:card' content='summary' />\n      <meta name='twitter:site' content='@jxnblk' />\n      <meta name='twitter:title' content={title} />\n      <meta name='twitter:description' content={pkg.description} />\n      <meta name='twitter:image' content='https://rebassjs.org/card.png' />\n    </Helmet>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/header.js",
    "content": "import React from 'react'\nimport {\n  Flex,\n  Box,\n  Link,\n  Button,\n} from 'rebass'\nimport { useColorMode } from 'theme-ui'\n\nconst modes = [\n  'lite',\n  'dark',\n  'gray',\n  'hack',\n  'pink',\n]\n\nconst Burger = ({ size = 24 }) => (\n  <Box\n    as='svg'\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={size}\n    height={size}\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    sx={{\n      display: 'block',\n      margin: 0,\n    }}>\n    <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\" />\n  </Box>\n)\n\nconst Dot = props =>\n  <svg\n    viewBox='0 0 32 32'\n    width='24'\n    height='24'\n    fill='currentcolor'\n    style={{\n      display: 'block',\n    }}>\n    <circle\n      cx='16'\n      cy='16'\n      r='14'\n      fill='none'\n      stroke='currentcolor'\n      strokeWidth='4'\n    />\n    <path\n      d={`\n        M 16 0\n        A 16 16 0 0 0 16 32\n        z\n      `}\n    />\n  </svg>\n\nexport default ({\n  nav,\n  menu,\n  setMenu,\n  fullwidth,\n}) => {\n  const [ mode, setMode ] = useColorMode()\n\n  const cycleMode = e => {\n    const i = (modes.indexOf(mode) + 1) % modes.length\n    setMode(modes[i])\n  }\n\n  return (\n    <Flex\n      as='header'\n      px={3}\n      py={2}\n      height={64}\n      alignItems='center'>\n      {!fullwidth && (\n        <Button\n          title='Toggle Menu'\n          display={[ 'block', 'none' ]}\n          sx={{\n            width: 32,\n            height: 32,\n            p: 1,\n          }}\n          variant='transparent'\n          onClick={e => {\n            setMenu(!menu)\n            if (menu || !nav.current) return\n            const navlink = nav.current.querySelector('a')\n            navlink.focus()\n          }}>\n          <Burger />\n        </Button>\n      )}\n      <Link variant='nav' href='/'>Rebass</Link>\n      <Box mx='auto' />\n      <Link\n        mr={2}\n        variant='nav'\n        href='https://github.com/rebassjs/rebass'>\n        GitHub\n      </Link>\n      <Button\n        title='Change color mode'\n        variant='transparent'\n        sx={{\n          width: 32,\n          height: 32,\n          p: 1,\n          borderRadius: 99999,\n        }}\n        onClick={cycleMode}>\n        <Dot />\n      </Button>\n    </Flex>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/icon.js",
    "content": "import React from 'react'\nimport Logo from './Logo'\n\nexport default props => (\n  <div\n    style={{\n      fontFamily: 'system-ui, sans-serif',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: '#000',\n      width: 512,\n      height: 512,\n      borderRadius: 99999\n    }}>\n    <Logo\n      initial\n      static\n      size={512}\n      strokeWidth={6}\n      bg='#000'\n      {...props}\n    />\n  </div>\n)\n"
  },
  {
    "path": "packages/docs/src/components/layout.js",
    "content": "import React, { useState, useRef } from 'react'\nimport { Box, Flex } from 'rebass'\nimport { Pagination } from '@theme-ui/sidenav'\nimport Head from './head'\nimport SkipLink from './skip-link'\nimport Header from './header'\nimport Footer from './footer'\nimport Nav from './nav'\nimport EditLink from './edit-link'\n\nconst Sidebar = props =>\n  <Flex>\n    <Box\n      ref={props.nav}\n      open={props.open}\n      onClick={e => {\n        props.setMenu(false)\n      }}\n      onBlur={e => {\n        props.setMenu(false)\n      }}\n      onFocus={e => {\n        props.setMenu(true)\n      }}\n      style={{\n        transform: props.open ? 'translateX(0)' : 'translateX(-100%)',\n      }}\n      sx={{\n        position: [ 'fixed', 'sticky' ],\n        zIndex: 1,\n        top: 0,\n        left: 0,\n        bottom: [0, 'auto'],\n        width: [ 256, 256, 320 ],\n        minWidth: 0,\n        maxHeight: ['100vh', 'none'],\n        overflowY: 'auto',\n        WebkitOverflowScrolling: 'touch',\n        flex: 'none',\n        px: 3,\n        mt: [64, 0],\n        pb: 3,\n        bg: ['background', 'transparent'],\n        transition: 'transform .2s ease-out',\n        transform: [, 'none !important'],\n        ul: {\n          listStyle: 'none',\n          padding: 0,\n        },\n        a: {\n          variant: 'links.nav',\n        },\n        'li > ul > li > a': {\n          pl: '24px',\n        }\n      }}>\n      <Nav />\n    </Box>\n    <Box\n      sx={{\n        width: '100%',\n        minWidth: 0,\n        maxWidth: 768,\n        minHeight: 'calc(100vh - 64px)',\n        mx: 'auto',\n        px: [ 3, 4 ],\n        pb: 5,\n      }}>\n      {props.children}\n      <EditLink my={5}>\n        Edit this page on GitHub\n      </EditLink>\n      <Nav\n        pathname={props.location.pathname}\n        components={{\n          wrapper: Pagination\n        }}\n      />\n    </Box>\n  </Flex>\n\nexport default (props) => {\n  const fullwidth = props.location.pathname === '/'\n  const [ menu, setMenu ] = useState(false)\n  const nav = useRef(null)\n\n  return (\n    <div>\n      <SkipLink />\n      <Head {...props} />\n      <Header\n        fullwidth={fullwidth}\n        menu={menu}\n        setMenu={setMenu}\n        nav={nav}\n      />\n      {!fullwidth ? (\n        <Sidebar\n          {...props}\n          nav={nav}\n          open={menu}\n          setMenu={setMenu}>\n          <main id='content'>\n            {props.children}\n          </main>\n        </Sidebar>\n      ) : (\n        <main id='content'>\n          {props.children}\n        </main>\n      )}\n      <Footer />\n    </div>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/logo.js",
    "content": "import React from 'react'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/core'\nimport { useThemeUI } from 'theme-ui'\nimport { layout } from 'styled-system'\n\nconst Svg = styled(({\n  width,\n  height,\n  ...props\n}) => <svg xmlns='http://www.w3.org/2000/svg' {...props} />)`\n  transform: rotate3d(1, 1, 1, 0deg);\n  ${layout}\n`\n\nconst spin1 = keyframes`\n  50% { transform: rotate3d(0, 2, 1, 180deg) }\n  100% { transform: rotate3d(0, 2, 1, 360deg) }\n`\nconst spin2 = keyframes`\n  50% { transform: rotate3d(2, 0, 1, 180deg) }\n  100% { transform: rotate3d(2, 0, 1, 360deg) }\n`\n\nconst fade1 = keyframes`\n  0% { stroke: magenta }\n  33% { stroke: cyan }\n  66% { stroke: yellow }\n  100% { stroke: magenta }\n`\n\nconst a = '4s'\nconst b = '7s'\nconst c = '8s'\n\nconst Electron1 = styled('circle')`\n  transform-origin: 50% 50%;\n  animation-name: ${spin1}, ${fade1};\n  animation-duration: ${a}, ${b};\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n`\n\nconst Electron2 = styled('circle')`\n  transform-origin: 50% 50%;\n  animation-name: ${spin2}, ${fade1};\n  animation-duration: ${a}, ${c};\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n`\n\nconst ElectronStatic1 = styled('circle')`\n  transform-origin: 50% 50%;\n  transform: rotate3d(0, 2, 1, 190deg);\n`\n\nconst ElectronStatic2 = styled('circle')`\n  transform-origin: 50% 50%;\n  transform: rotate3d(2, 0, 1, 190deg);\n`\n\nconst Logo = props => {\n  const electronProps = {\n    cx: 32,\n    cy: 32,\n    r: 24,\n    strokeWidth: props.strokeWidth,\n    vectorEffect: 'non-scaling-stroke'\n  }\n\n  const electrons = props.static\n    ? (\n      <g>\n        <ElectronStatic1 {...electronProps} stroke='#f90' />\n        <ElectronStatic2 {...electronProps} stroke='magenta' />\n      </g>\n    )\n    : (\n      <g>\n        <Electron1 {...electronProps} />\n        <Electron2 {...electronProps} />\n      </g>\n    )\n\n  return (\n    <Svg viewBox='0 0 64 64'\n      style={{\n        display: 'block',\n        maxWidth: '100%',\n        margin: 0,\n        fill: 'none',\n        stroke: 'cyan',\n      }}\n      vectorEffect='non-scaling-stroke'\n      width={props.size}\n      height={props.size}>\n      {props.styles}\n      <circle\n        cx={32}\n        cy={32}\n        r={32}\n        fill={props.bg}\n        stroke='none'\n      />\n      <circle\n        cx={32}\n        cy={32}\n        r={30}\n        strokeWidth={props.strokeWidth / 2}\n        vectorEffect='non-scaling-stroke'\n        opacity={1/2}\n      />\n      {electrons}\n      {!props.text && props.initial && (\n        <text\n          x={32}\n          y={40}\n          textAnchor='middle'\n          fontFamily='system-ui, sans-serif'\n          fontWeight='bold'\n          fontSize='24'\n          stroke='none'\n          fill={props.color}>\n          R\n        </text>\n      )}\n      {props.text && (\n        <text\n          x={32}\n          y={34}\n          textAnchor='middle'\n          fontFamily='system-ui, sans-serif'\n          fontWeight='bold'\n          fontSize='4'\n          stroke='none'\n          fill={props.color}\n          style={{\n            textTransform: 'uppercase',\n            letterSpacing: '0.5em'\n          }}>\n          {props.text}\n        </text>\n      )}\n    </Svg>\n  )\n}\n\nLogo.defaultProps = {\n  initial: false,\n  color: 'white',\n  bg: 'transparent',\n  strokeWidth: 2,\n  size: 256\n}\n\nexport default Logo\n"
  },
  {
    "path": "packages/docs/src/components/nav.mdx",
    "content": "- [Getting Started](/getting-started)\n- [Props](/props)\n- [Theming](/theming)\n- [Variants](/variants)\n- [Extending](/extending)\n- [Box](/box)\n- [Flex](/flex)\n- [Text](/text)\n- [Heading](/heading)\n- [Button](/button)\n- [Link](/link)\n- [Image](/image)\n- [Card](/card)\n- [Forms](/forms)\n  - [Label](/forms/label)\n  - [Input](/forms/input)\n  - [Select](/forms/select)\n  - [Textarea](/forms/textarea)\n  - [Radio](/forms/radio)\n  - [Checkbox](/forms/checkbox)\n  - [Slider](/forms/slider)\n  - [Switch](/forms/switch)\n- [Layout](/layout)\n- [Guides](/guides)\n  - [CSS Grid](/guides/css-grid)\n  - [MDX](/guides/mdx)\n  - [Using Rebass without Context](/guides/using-rebass-without-context)\n  - [Server- Side Rendering](/guides/server-side-rendering)\n  - [Styled Components](/guides/styled-components)\n- [Demo](/demo)\n- [Recipes](/recipes)\n  - [Flexbox Grid](/recipes/flexbox-grid)\n  - [Flexbox Wrap](/recipes/flexbox-wrap)\n  - [Nav Bar](/recipes/nav-bar)\n  - [Image Card](/recipes/image-card)\n  - [Background Image Card](/recipes/background-image-card)\n  - [Video Embed](/recipes/video-embed)\n  - [Container](/recipes/container)\n  - [Avatar](/recipes/avatar)\n  - [Badge](/recipes/badge)\n  - [NavLink](/recipes/nav-link)\n"
  },
  {
    "path": "packages/docs/src/components/note.js",
    "content": "import React from 'react'\nimport { Box } from 'rebass'\n\nexport default props =>\n  <Box\n    {...props}\n    sx={{\n      fontSize: 1,\n      fontStyle: 'italic',\n      px: 3,\n      py: 2,\n      my: 4,\n      bg: 'muted',\n      borderRadius: 4,\n      borderLeft: t => `8px solid ${t.colors.primary}`,\n    }}\n  />\n"
  },
  {
    "path": "packages/docs/src/components/recipe-card.js",
    "content": "import React from 'react'\nimport { Link } from 'gatsby'\nimport { Box, Card } from 'rebass'\n\nexport default props => {\n  const children = React.Children.toArray(props.children)\n  const title = children.find(child => child.type === 'h1' || child.props.mdxType === 'h1')\n  const example = children.find(child =>\n    child.type === 'pre' || child.props.mdxType === 'pre')\n\n  const [ pre ] = React.Children.toArray(example.props.children)\n  const preview = React.cloneElement(pre, {\n    preview: true\n  })\n\n  return (\n    <Card\n      as={Link}\n      to={props.href}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        height: '100%',\n        textDecoration: 'none',\n        color: 'inherit',\n      }}>\n      <Box\n        sx={{\n          flex: '1 1 auto',\n          overflow: 'hidden',\n        }}>\n        {preview}\n      </Box>\n      <Box\n        mt={3}\n        fontWeight='bold'>\n        {title.props.children}\n      </Box>\n    </Card>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/components/skip-link.js",
    "content": "import React from 'react'\nimport { Link } from 'rebass'\n\nexport default props => (\n  <Link\n    children=\"Skip to content\"\n    href=\"#content\"\n    {...props}\n    sx={{\n      clip: 'rect(0 0 0 0)',\n      height: 1,\n      width: 1,\n      m: -1,\n      p: 0,\n      overrflow: 'hidden',\n      position: 'absolute',\n      top: -9999,\n      ':focus': {\n        p: 3,\n        position: 'fixed',\n        zIndex: 4,\n        top: 0,\n        left: 0,\n        m: 2,\n        fontWeight: 'bold',\n        color: 'black',\n        bg: 'white',\n        width: 'auto',\n        height: 'auto',\n        clip: 'auto',\n      },\n    }}\n  />\n)\n"
  },
  {
    "path": "packages/docs/src/components/twitter-card.js",
    "content": "import React from 'react'\nimport Logo from './Logo'\n\nconst photo = 'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20'\n\nexport default props => (\n  <div\n    style={{\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'black',\n      width: 1024,\n      height: 512\n    }}>\n    <Logo\n      static\n      text\n      strokeWidth={4}\n      size={512}\n      {...props}\n    />\n  </div>\n)\n"
  },
  {
    "path": "packages/docs/src/components/wrapper.js",
    "content": "import React from 'react'\nimport { Styled } from 'theme-ui'\nimport { Link } from 'gatsby'\nimport { Helmet } from 'react-helmet'\nimport { Box, Flex } from 'rebass'\nimport { globalHistory } from '@reach/router'\n\nconst breadcrumbRoutes = [\n  'guides',\n  'recipes',\n]\n\n\nexport const Breadcrumbs = ({\n  title,\n}) => {\n  const { location } = globalHistory\n  const [ n, base, path ] = location.pathname.split('/')\n  if (!breadcrumbRoutes.includes(base)) return false\n  if (!path) return false\n\n  return (\n    <Flex\n      sx={{\n        fontWeight: 'bold',\n        mb: 4,\n        textTransform: 'capitalize',\n      }}>\n      <Styled.a\n        as={Link}\n        to={'/' + base}>\n        {base}\n      </Styled.a>\n      <Box px={2}>\n        /\n      </Box>\n      <Box>\n        {title || path}\n      </Box>\n    </Flex>\n  )\n}\n\n\nexport const wrapper = ({\n  title,\n  ...props\n}) => {\n  const children = React.Children.toArray(props.children)\n    .reduce((acc, child) => {\n      const type = child.props.mdxType\n      if (type !== 'h1') return [ ...acc, child ]\n      return [\n        ...acc,\n        child,\n        <Breadcrumbs key='breadcrumbs' title={title} />,\n      ]\n    }, [])\n\n  return (\n    <>\n      {title && (\n        <Helmet>\n          <title>{title} | Rebass</title>\n        </Helmet>\n      )}\n      {children}\n    </>\n  )\n}\n"
  },
  {
    "path": "packages/docs/src/gatsby-plugin-theme-ui/components.js",
    "content": "import React from 'react'\nimport code from '../components/code'\nimport { wrapper } from '../components/wrapper'\n\nconst heading = Tag => props => {\n  if (!props.id) return <Tag {...props} />\n\n  return (\n    <Tag {...props}>\n      <a href={'#' + props.id}>\n        {props.children}\n      </a>\n    </Tag>\n  )\n}\n\nexport default {\n  wrapper,\n  pre: props => props.children,\n  code,\n  h2: heading('h2'),\n  h3: heading('h3'),\n  h4: heading('h4'),\n  h5: heading('h5'),\n  h6: heading('h6'),\n}\n"
  },
  {
    "path": "packages/docs/src/gatsby-plugin-theme-ui/index.js",
    "content": "import preset from '@rebass/preset'\nimport merge from 'lodash.merge'\nimport prism from '@theme-ui/prism/presets/theme-ui'\n\nexport default merge(preset, {\n  initialColorModeName: 'lite',\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#33e',\n    secondary: '#a0c',\n    accent: '#f0a',\n    muted: '#f6f6ff',\n    gray: '#444',\n    lightgray: '#cfcfd3',\n    modes: {\n      dark: {\n        text: '#fff',\n        background: '#000',\n        primary: '#0ff',\n        secondary: '#b0f',\n        accent: '#f0b',\n        muted: '#111',\n        gray: '#999',\n        lightgray: '#444',\n      },\n      gray: {\n        text: '#fff',\n        background: 'hsl(270, 30%, 14%)',\n        primary: 'hsl(180, 100%, 60%)',\n        secondary: 'hsl(270, 100%, 60%)',\n        accent: 'hsl(300, 100%, 60%)',\n        muted: 'hsl(270, 50%, 8%)',\n        gray: 'hsl(270, 50%, 70%)',\n        lightgray: 'hsl(270, 50%, 30%)',\n      },\n      hack: {\n        text: 'hsl(120, 100%, 75%)',\n        background: 'hsl(120, 20%, 10%)',\n        primary: 'hsl(120, 100%, 40%)',\n        secondary: 'hsl(120, 50%, 40%)',\n        accent: 'hsl(120, 100%, 90%)',\n        muted: 'hsl(120, 20%, 7%)',\n        gray: 'hsl(120, 20%, 40%)',\n        lightgray: 'hsl(120, 20%, 20%)',\n      },\n      pink: {\n        text: 'hsl(350, 80%, 10%)',\n        background: 'hsl(350, 100%, 90%)',\n        primary: 'hsl(350, 100%, 50%)',\n        secondary: 'hsl(280, 100%, 50%)',\n        accent: 'hsl(280, 100%, 20%)',\n        muted: 'hsl(350, 100%, 88%)',\n        gray: 'hsl(350, 40%, 50%)',\n        lightgray: 'hsl(350, 60%, 80%)',\n      },\n    }\n  },\n  fontWeights: {\n    body: 400,\n    heading: 800,\n    bold: 700,\n  },\n  sizes: {\n    wide: 1280,\n  },\n  shadows: {\n    small: `0 0 0px 1px rgba(0, 0, 0, 0.25)`,\n  },\n  buttons: {\n    big: {\n      variant: 'buttons.primary',\n      px: 4,\n      py: 3,\n      fontSize: 3,\n    },\n    outline: {\n      variant: 'buttons.primary',\n      color: 'primary',\n      bg: 'transparent',\n      boxShadow: 'inset 0 0 0 2px'\n    },\n    transparent: {\n      color: 'inherit',\n      bg: 'transparent',\n      ':hover,:focus': {\n        color: 'primary',\n        outline: 'none',\n        boxShadow: '0 0 0 2px',\n      }\n    },\n  },\n  links: {\n    nav: {\n      display: 'block',\n      px: 2,\n      py: 1,\n      color: 'inherit',\n      textDecoration: 'none',\n      fontSize: 1,\n      fontWeight: 'bold',\n    },\n  },\n  text: {\n    heading: {\n      a: {\n        color: 'inherit',\n        textDecoration: 'none',\n        ':hover': {\n          textDecoration: 'underline',\n        }\n      }\n    }\n  },\n  variants: {\n    badge: {\n      display: 'inline-block',\n      px: 2,\n      color: 'background',\n      bg: 'primary',\n      borderRadius: 'circle',\n    },\n  },\n  styles: {\n    a: {\n      color: 'primary',\n      transition: 'color .2s ease-out',\n      ':hover,:focus': {\n        color: 'secondary',\n      }\n    },\n    inlineCode: {\n      fontFamily: 'monospace',\n      fontSize: '93.75%',\n      color: 'secondary',\n    },\n    code: {\n      fontFamily: 'monospace',\n      color: 'secondary',\n    },\n    pre: {\n      ...prism,\n      fontFamily: 'monospace',\n      fontSize: 1,\n      overflowX: 'auto',\n      bg: 'muted',\n      p: 3,\n      borderRadius: 4,\n    },\n    blockquote: {\n      p: 0,\n      mx: 0,\n      fontWeight: 'bold',\n      fontSize: 3,\n    },\n    h1: {\n      variant: 'text.heading',\n      mt: 0,\n      fontSize: [5, 6],\n    },\n    h2: {\n      variant: 'text.heading',\n      fontSize: [4, 5],\n    },\n    h3: {\n      variant: 'text.heading',\n      fontSize: 3,\n    },\n    h4: { variant: 'text.heading', },\n    h5: { variant: 'text.heading', },\n    h6: { variant: 'text.heading', },\n    table: {\n      width: '100%',\n      borderCollapse: 'separate',\n      borderSpacing: 0,\n    },\n    th: {\n      py: 2,\n      textAlign: 'left',\n      borderBottom: t => `4px solid ${t.colors.muted}`,\n    },\n    td: {\n      py: 2,\n      textAlign: 'left',\n      borderBottom: t => `1px solid ${t.colors.muted}`,\n    },\n  },\n  forms: {\n    label: {\n      fontSize: 1,\n      fontWeight: 'bold',\n    },\n    field: {\n      borderColor: 'lightgray',\n      ':focus': {\n        borderColor: 'primary',\n        outline: 'none',\n        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,\n      }\n    },\n    input: {\n      variant: 'forms.field',\n    },\n    select: {\n      variant: 'forms.field',\n    },\n    textarea: {\n      variant: 'forms.field',\n    },\n    radio: {\n    },\n    slider: {\n      bg: 'lightgray',\n    },\n    switch: {\n      // thumb: {}\n    }\n  }\n})\n"
  },
  {
    "path": "packages/docs/src/index.js",
    "content": "import React from 'react'\nimport Layout from './components/layout'\n\nexport { default as Layout } from './components/layout'\nexport * from './components/blocks'\nexport { default as DemoProvider } from './components/demo-provider'\nexport { default as Note } from './components/note'\nexport { default as Logo } from './components/logo'\nexport { default as RecipeCard } from './components/recipe-card'\n\nexport const wrapPageElement = ({ element, props }) =>\n  <Layout {...props}>\n    {element}\n  </Layout>\n"
  },
  {
    "path": "packages/docs/src/pages/404.mdx",
    "content": "import { Flex } from 'rebass'\n\n<Flex justifyContent='center' mb={5}>\n  <Logo\n    text='404'\n    color='black'\n    bg='white'\n  />\n</Flex>\n\n# 404\n\nPage not found\n"
  },
  {
    "path": "packages/docs/src/pages/box.mdx",
    "content": "export const title = 'Box'\n\n# Box\n\nResponsive box-model layout component\n\n```jsx live=true\n<Box\n  p={5}\n  fontSize={4}\n  width={[ 1, 1, 1/2 ]}\n  color='white'\n  bg='primary'>\n  Box\n</Box>\n```\n\nThe Box and Flex components are also available in the standalone [Reflexbox](/reflexbox) package.\n"
  },
  {
    "path": "packages/docs/src/pages/button.mdx",
    "content": "export const title = 'Button'\n\n# Button\n\nButton component with variants\n\n```jsx live=true\n<Button variant='primary' mr={2}>Primary</Button>\n<Button variant='secondary' mr={2}>Secondary</Button>\n<Button variant='outline' mr={2}>Outline</Button>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/card.mdx",
    "content": "export const title = 'Card'\n\n# Card\n\nExtension of the Box component with card styles\n\n```jsx live=true\n<Card width={256}>\n  <Image src={props.image} />\n  <Heading>Card</Heading>\n</Card>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/demo.mdx",
    "content": "import {\n  Box,\n  Heading,\n  Text,\n  Button,\n  Image,\n  Card,\n} from 'rebass'\nimport { DemoProvider } from '..'\n\nexport const title = 'Demo'\n\n# Demo\n\n<DemoProvider>\n\n```jsx live=true\n<Box\n  sx={{\n    p: 4,\n    color: 'text',\n    bg: 'background',\n    fontFamily: 'body',\n    fontWeight: 'body',\n    lineHeight: 'body',\n  }}>\n  <Heading variant='display'>Hello</Heading>\n  <Text mb={4}>This is a demo using presets from Theme UI</Text>\n  <Button mr={3}>\n    Beep\n  </Button>\n  <Button variant='secondary'>\n    Boop\n  </Button>\n</Box>\n```\n\n</DemoProvider>\n\n\n"
  },
  {
    "path": "packages/docs/src/pages/extending.mdx",
    "content": "import Note from '../components/note'\nexport const title = 'Extending'\n\n# Extending\n\nRebass components are designed to be used as foundational primitives\nfor building a custom design system.\nBy extending these base components, you can quickly start a component library\nwith a consistent API and styles that are driven by design constraints\nthat you define in your theme.\n\nTo extend a component, pass props through and define custom styles in the `sx` prop.\n\n```jsx\nimport React from 'react'\nimport { Box } from 'rebass'\n\nconst Container = props =>\n  <Box\n    {...props}\n    sx={{\n      maxWidth: '1024px',\n      mx: 'auto',\n      px: 3,\n    }}\n  />\n```\n\nIf you prefer, you can also use `@emotion/styled` to extend components.\n\n<Note>\n  \nIt's not recommended to use the `styled` API from `styled-components` due to various issues and unexpected behavior.\n\n</Note>\n\n## Order of Styles\n\nBecause Rebass still uses CSS, you might have to contend with the cascade, depending on how you define your styles,\nespecially in regards to source order and using shorthand CSS properties.\n\nRebass components apply styles in the following order:\n\n1. Variant\n2. `sx` prop\n3. `css` prop\n4. Styled System props\n\n### Shorthand CSS Properties\n\nIf you're using CSS properties that have shorthand variations, try to use the normal CSS property instead.\n\n```js\n// avoid shorthand syntax\nsx={{\n  border: '1px solid tomato',\n}}\n```\n```js\n// use regular properties instead\nsx={{\n  borderWidth: '1px',\n  borderStyle: 'solid',\n  borderColor: 'tomato',\n}}\n```\n\n### Conflicting Styles\n\nIt's easy to add conflicting styles in two different places and end up with unexpected results.\n\n- If you're intending to use a style prop, don't use it in the `sx` prop or in variants.\n- If you're intending to use variants, don't include conflicting styles in the `sx` prop\n\n## Default Props\n\nInstead of using the `defaultProps` property on your component, define defaults inline in the JSX.\nThe `{...props}` from the outside will override the ones you set on the component.\n\n```jsx\nconst Container = props =>\n  <Box\n    maxWidth='container'\n    px={3}\n    mx='auto'\n    {...props}\n  />\n```\n\n## Default Variants\n\nTo set a default variant, include the variant in your theme.\n\n```js\nvariants: {\n  badge: {\n    color: 'white',\n    bg: 'tomato',\n    px: 2,\n  },\n}\n```\n\nThen add the default prop in your component.\n\n```jsx\nconst Badge = props =>\n  <Box\n    variant='badge'\n    {...props}\n  />\n```\n\n## Example Extensions\n\n### Avatar\n\n```jsx\nconst Avatar = props =>\n  <Image\n    {...props}\n    sx={{\n      width: 48,\n      height: 48,\n      borderRadius: 9999,\n    }}\n  />\n```\n\n### Embed\n\n```jsx\nconst Embed = props =>\n  <Box\n    {...props}\n    sx={{\n      width: '100%',\n      height: 0,\n      paddingBottom: (9 / 16) + '%',\n      position: 'relative',\n      overflow: 'hidden',\n      '& > iframe': {\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        top: 0,\n        bottom: 0,\n        left: 0,\n        border: 0\n      }\n    }}\n  />\n```\n\n### Pre\n\n```jsx\nconst Pre = props =>\n  <Text\n    {...props}\n    as='pre'\n    sx={{\n      fontFamily: 'monospace',\n      p: 2,\n      color: 'secondary',\n      bg: 'muted',\n      overflowX: 'auto',\n    }}\n  />\n```\n\n### Fixed\n\n```jsx\nconst Fixed = props =>\n  <Box\n    {...props}\n    sx={{\n      position: 'fixed'\n    }}\n  />\n```\n\n### Divider\n\n```jsx\nconst Divider = props =>\n  <Box\n    {...props}\n    as='hr'\n    sx={{\n      bg: 'gray',\n      border: 0,\n      height: 1\n    }}\n  />\n```\n\n<!--\n\n### Toolbar\n\n```jsx\nconst Toolbar = props =>\n  <Flex\n    {...props}\n    sx={{\n      px: 2,\n      color: 'white',\n      bg: 'black',\n      alignItems: 'center',\n    }}\n  />\n```\n-->\n\nSee the [Recipes](/recipes) page for more examples.\n"
  },
  {
    "path": "packages/docs/src/pages/flex.mdx",
    "content": "export const title = 'Flex'\n\n# Flex\n\nResponsive flexbox layout component\n\n```jsx live=true\n<Flex>\n  <Box\n    p={3}\n    width={1/2}\n    color='white'\n    bg='primary'>\n    Flex\n  </Box>\n  <Box\n    p={3}\n    width={1/2}\n    color='white'\n    bg='secondary'>\n    Box\n  </Box>\n</Flex>\n```\n\nThe Box and Flex components are also available in the standalone [Reflexbox](/reflexbox) package.\n"
  },
  {
    "path": "packages/docs/src/pages/forms/checkbox.mdx",
    "content": "export const title = 'Checkbox'\n\n# Checkbox\n\nAccessible and themeable form checkbox input component.\n\n```js\nimport { Label, Checkbox } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label>\n    <Checkbox\n      id='remember'\n      name='remember'\n    />\n    Remember me\n  </Label>\n</Box>\n```\n\nNote that the `Label` component uses `display: flex` by default to make alignment with labels simpler.\n"
  },
  {
    "path": "packages/docs/src/pages/forms/index.mdx",
    "content": "import { Box, Button } from 'rebass'\nexport const title = 'Forms'\n\n# Forms\n\nAccessible and themeable form components for use with Rebass or Theme UI.\n\n```sh\nnpm i @rebass/forms\n```\n\nImport and use the form components alongside other Rebass components.\n\n```js\nimport {\n  Label,\n  Input,\n  Select,\n  Textarea,\n  Radio,\n  Checkbox,\n} from '@rebass/forms'\n```\n\n```jsx live\n<Box\n  as='form'\n  onSubmit={e => e.preventDefault()}\n  py={3}>\n  <Flex mx={-2} mb={3}>\n    <Box width={1/2} px={2}>\n      <Label htmlFor='name'>Name</Label>\n      <Input\n        id='name'\n        name='name'\n        defaultValue='Jane Doe'\n      />\n    </Box>\n    <Box width={1/2} px={2}>\n      <Label htmlFor='location'>Location</Label>\n      <Select\n        id='location'\n        name='location'\n        defaultValue='NYC'>\n        <option>NYC</option>\n        <option>DC</option>\n        <option>ATX</option>\n        <option>SF</option>\n        <option>LA</option>\n      </Select>\n    </Box>\n  </Flex>\n  <Flex mx={-2} flexWrap='wrap'>\n    <Label width={[ 1/2, 1/4 ]} p={2}>\n      <Radio\n        id='beep'\n        name='beep'\n        value='beep'\n        defaultChecked\n      />\n      Beep\n    </Label>\n    <Label width={[ 1/2, 1/4 ]} p={2}>\n      <Radio\n        id='boop'\n        name='beep'\n        value='boop'\n      />\n      Boop\n    </Label>\n    <Label width={[1/2, 1/4]} p={2}>\n      <Checkbox\n        id='remember'\n        name='remember'\n      />\n      Remember Me\n    </Label>\n    <Box px={2} ml='auto'>\n      <Button>\n        Beep\n      </Button>\n    </Box>\n  </Flex>\n</Box>\n```\n\n## Theming\n\nEach form element can be customized with the `forms` object in your theme.\n\n```js\n// example theme\nexport default {\n  forms: {\n    input: {\n      color: 'primary',\n    },\n    select: {\n      borderRadius: 9999,\n    },\n    textarea: {},\n    label: {},\n    radio: {},\n    checkbox: {},\n  },\n}\n```\n\n## Variants\n\nAdditional component variants can be defined in the theme and applied via props.\n\n```js\n// example theme with variants\nexport default {\n  forms: {\n    largeInput: {\n      fontSize: 3,\n      px: 3,\n      py: 2,\n    }\n  }\n}\n```\n\n```jsx\n<Input variant='largeInput' />\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/input.mdx",
    "content": "export const title = 'Input'\n\n# Input\n\nAccessible and themeable form input component.\n\n```js\nimport { Label, Input } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label htmlFor='email'>Email</Label>\n  <Input\n    id='email'\n    name='email'\n    type='email'\n    placeholder='jane@example.com'\n  />\n</Box>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/label.mdx",
    "content": "export const title = 'Label'\n\n# Label\n\nAccessible and themeable form label component.\n\n```js\nimport { Label } from '@rebass/forms'\n```\n\n```jsx live\n<Label htmlFor='email'>Email</Label>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/radio.mdx",
    "content": "export const title = 'Radio'\n\n# Radio\n\nAccessible and themeable form radio input component.\n\n```js\nimport { Label, Radio } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label>\n    <Radio\n      name='color'\n      id='red'\n      value='red'\n    />\n    Red\n  </Label>\n  <Label>\n    <Radio\n      name='color'\n      id='green'\n      value='green'\n    />\n    Green\n  </Label>\n  <Label>\n    <Radio\n      name='color'\n      id='blue'\n      value='blue'\n    />\n    Blue\n  </Label>\n</Box>\n```\n\nNote that the `Label` component uses `display: flex` by default to make alignment with labels simpler.\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/select.mdx",
    "content": "export const title = 'Select'\n\n# Select\n\nAccessible and themeable form select component.\n\n```js\nimport { Label, Select } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label htmlFor='country'>Country</Label>\n  <Select\n    id='country'\n    name='country'\n    defaultValue='United States'>\n    {Object.entries(props.countries).map(([ key, country ]) => (\n      <option\n        key={key}>\n        {country.name}\n      </option>\n    ))}\n  </Select>\n</Box>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/slider.mdx",
    "content": "export const title = 'Slider'\n\n# Slider\n\nAccessible and themeable form range input component.\n\n```js\nimport { Label, Slider } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label htmlFor='percent'>Percent</Label>\n  <Slider\n    id='percent'\n    name='percent'\n    defaultValue={25}\n  />\n</Box>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/forms/switch.mdx",
    "content": "export const title = 'Switch'\n\n# Switch\n\nToggle switch button component\n\n```js\nimport { Switch } from '@rebass/forms'\n```\n\n```jsx live\n<Switch />\n```\n"
  },
  {
    "path": "packages/docs/src/pages/forms/textarea.mdx",
    "content": "export const title = 'Textarea'\n\n# Textarea\n\nAccessible and themeable form textarea component.\n\n```js\nimport { Label, Textarea } from '@rebass/forms'\n```\n\n```jsx live\n<Box>\n  <Label htmlFor='comment'>Comment</Label>\n  <Textarea\n    id='comment'\n    name='comment'\n  />\n</Box>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/getting-started.mdx",
    "content": "export const title = 'Getting Started'\n\n# Getting Started\n\nInstall the core Rebass library.\n\n```sh\nnpm i rebass\n```\n\n## ThemeProvider\n\nBy default, Rebass components are stylistically unopinionated and do not include a theme.\nYou can add a theme to your application with a `ThemeProvider` component and by providing a theme in context.\nFor this guide, use the Emotion `ThemeProvider` with the default Rebass preset theme.\n\n```sh\nnpm i @rebass/preset emotion-theming\n```\n\nWrap your application with the `ThemeProvider` component.\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport theme from '@rebass/preset'\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    {props.children}\n  </ThemeProvider>\n```\n\nAlternatively, if you'd like to use Rebass with [Theme UI][],\nyou can use the `ThemeProvider` from `theme-ui`, or use [`gatsby-plugin-theme-ui`](https://theme-ui.com/gatsby-plugin).\n\n```sh\nimport { ThemeProvider } from 'theme-ui'\n```\n\n## Composition\n\nYou can use Rebass components out-of-the-box to build larger, composite components.\n\n```jsx\nimport React from 'react'\nimport {\n  Box,\n  Card,\n  Image,\n  Heading,\n  Text\n} from 'rebass'\n\nexport default ({\n  image,\n  title,\n  description\n}) =>\n  <Box width={256}>\n    <Card\n      sx={{\n        p: 1,\n        borderRadius: 2,\n        boxShadow: '0 0 16px rgba(0, 0, 0, .25)',\n      }}>\n      <Image src={image} />\n      <Box px={2}>\n        <Heading as='h3'>\n          {title}\n        </Heading>\n        <Text fontSize={0}>\n          {description}\n        </Text>\n      </Box>\n    </Card>\n  </Box>\n```\n\n```jsx live=true\n  <Box width={256}>\n    <Card\n      sx={{\n        p: 1,\n        borderRadius: 2,\n        boxShadow: '0 0 16px rgba(0, 0, 0, .25)',\n      }}>\n      <Image src={props.image} />\n      <Box px={2}>\n        <Heading as='h3'>\n          Card Demo\n        </Heading>\n        <Text fontSize={0}>\n          You can edit this code\n        </Text>\n      </Box>\n    </Card>\n  </Box>\n```\n\nAll components in Rebass are extensions of the base [Box](/box) component, which includes an `sx` prop for theme-based styling as well as a standard set of [Styled System][] style props.\n\n## Extending\n\nYou can also use Rebass components as basic building blocks and extend them to create custom UI components,\nwhich is a great way to get started with a new design system without *boiling the ocean*.\n\n```jsx\n// custom button example\nimport React from 'react'\nimport { Button } from 'rebass'\n\nexport default props =>\n  <Button\n    {...props}\n    sx={{\n      fontSize: 1,\n      textTransform: 'uppercase',\n      borderRadius: 99999,\n    }}\n  />\n```\n\n## Theming\n\nUse the default Rebass theme or completely customize the look and feel with a custom theme.\nSince Rebass follows the [Theme Specification][], any theme built for use with [Theme UI][] or [Styled System][] will work out-of-the-box.\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\n\nconst theme = {\n  fontSizes: [\n    12, 14, 16, 24, 32, 48, 64\n  ],\n  colors: {\n    primary: '#07c',\n    gray: '#f6f6ff',\n  },\n  buttons: {\n    primary: {\n      color: 'white',\n      bg: 'primary',\n    },\n    outline: {\n      color: 'primary',\n      bg: 'transparent',\n      boxShadow: 'inset 0 0 0 2px'\n    },\n  },\n}\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    {props.children}\n  </ThemeProvider>\n```\n\n## Variants\n\nEach component accepts a `variant` prop, giving you multiple styles for buttons, cards, text styles, and more.\nYou can define custom variants in your own theme or use the defaults from the Rebass preset theme.\n\n```jsx live=true\n<Button variant='primary' mr={2}>Beep</Button>\n<Button variant='secondary'>Boop</Button>\n```\n\n[styled system]: https://styled-system.com\n[theme specification]: https://github.com/system-ui/theme-specification\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/docs/src/pages/guides/css-grid.mdx",
    "content": "export const title = 'CSS Grid'\n\n# CSS Grid\n\nRebass components can be used to create one-off or reusable CSS Grid layout components.\nWhile the entirety of what's possible with CSS Grid is outside the scope of this guide, the following should demonstrate how to apply any CSS Grid layout using Rebass.\n\n<Note>\n\nThis guide is a work-in-progress.\nIf you'd like to help make this better,\nplease open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).\n\n</Note>\n\nCSS Grid is great for arranging direct child elements without the need for additional styles applied to the children.\nCreate an extension of the Box component that can wrap other elements to apply a grid layout.\n\n```jsx\n// example grid layout component\nimport React from 'react'\nimport { Box } from 'rebass'\n\nexport default props =>\n  <Box\n    {...props}\n    sx={{\n      display: 'grid',\n      gridGap: 3,     // theme.space[3]\n    }}\n  />\n```\n\nBy using the `sx` prop, CSS properties such as `gridGap` will use values from your theme object.\nThis can help ensure consistent whitespace throughout your layout.\n\n## Auto Columns\n\nUsing the `grid-auto-columns` property, you can quickly lay out child elements in a tile-based grid.\n\n```jsx\n// example grid layout component\nimport React from 'react'\nimport { Box } from 'rebass'\n\nexport default props =>\n  <Box\n    {...props}\n    sx={{\n      display: 'grid',\n      gridGap: 3,     // theme.space[3]\n      gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',\n    }}\n  />\n```\n\n## Demo\n\nUse the live demo below to explore different layouts using CSS Grid.\n\n```jsx live=true\n<Box\n  sx={{\n    display: 'grid',\n    gridGap: 4,\n    gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',\n  }}>\n  <Heading p={3} bg='muted'>Hello</Heading>\n  <Box p={3} color='background' bg='primary'>CSS Grid</Box>\n</Box>\n```\n\n## Resources\n\nThere are many resources for learning how to use CSS Grid layout.\nTo fully understand any API in CSS, I *highly* recommend reading the specification, since it is the authoritative source for how CSS is intended to work:\n\n**[CSS Grid Layout Module Level 1][spec]**\n\nOnce you have a basic grasp of the concepts in the specification, MDN is an excellent resource for learning any web technology:\n\n**[MDN: CSS Grid Layout][mdn]**\n\nAdditional resources:\n\n- [Grid by Example][]\n- [Jen Simmon's Lab][simmons-lab]\n- [CSS Tricks][]\n\n[spec]: https://www.w3.org/TR/css-grid-1/\n[mdn]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout\n[css tricks]: https://css-tricks.com/snippets/css/complete-guide-grid/\n[grid by example]: https://gridbyexample.com/\n[simmons-lab]: https://labs.jensimmons.com/\n\n<!-- vet this? -->\n[learn-css-grid]: https://learncssgrid.com/\n"
  },
  {
    "path": "packages/docs/src/pages/guides/index.mdx",
    "content": "import { Grid } from '../..'\nexport const title = 'Guides'\n\n# Guides\n\n<Grid\n  sx={{\n    a: {\n      display: 'block',\n      fontWeight: 'bold',\n      fontSize: 3,\n      textDecoration: 'none',\n    }\n  }}>\n\n- [CSS Grid](/guides/css-grid)\n  Use the Rebass Box component and `sx` prop to create custom CSS Grid components\n- [MDX](/guides/mdx)\n  Use Rebass components to add styles and layout to MDX documents\n- [Using Rebass without Context](/guides/using-rebass-without-context)\n  Create self-contained components that do not require theming context\n- [Server-Side Rendering](/guides/server-side-rendering)\n  Render Rebass components on the server with zero configuration\n- [Styled Components](/guides/styled-components)\n  Use Rebass with the Styled Components library\n\n</Grid>\n"
  },
  {
    "path": "packages/docs/src/pages/guides/mdx.mdx",
    "content": "import { Note } from '../..'\nimport { Box } from 'rebass'\nexport const title = 'MDX'\n\n# MDX\n\n[MDX][] is a format that allows you to write content in markdown and import and use React components inline.\nIt's an excellent format for documentation, blogs, or other forms of structured content.\n\n<Note>\n\nThis guide is a work-in-progress.\nIf you'd like to help make this better,\nplease open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).\n\n</Note>\n\nRebass components can be imported and used directly in MDX documents,\nwhich lets you apply styles inline to sections of your page.\nSince the `sx` prop is built into the components, this can be a quick way to apply one off styles or create custom components like callouts and note boxes.\n\nIn the following example, the Box component is used to add a callout style box around its contents.\n\n```md\nimport { Box } from 'rebass'\n\n# MDX Example\n\n<Box\n  color='primary'\n  bg='muted'\n  p={3}\n  my={5}\n>\n\n> ”This is an important quote.”\n\n</Box>\n```\n\nYou can also use the `sx` prop with child selectors to dramatically change the layout of MDX content.\n\n```md\nimport { Box } from 'rebass'\n\n# MDX Example\n\n<Box\n  sx={{\n    ul: {\n      listStyle: 'none',\n      display: 'grid',\n      padding: 0,\n      gridGap: 3,\n      gridTemplateColumns: 'repeat(auto-fit, minmax(128px, 1fr))',\n    },\n    li: {\n      fontWeight: 'bold',\n    }\n  }}>\n\n- This is a list\n- Displayed in a grid layout\n- With custom styles\n- Pretty cool, huh?\n\n</Box>\n```\n\nIf you make repeated use of a particular layout block, consider moving it to its own component that can be imported in multiple MDX documents.\n\n<Note>\n\nIf you'd like to style the markdown elements with the same theme object and a similar API to Rebass,\nuse the [Theme UI][] library, which includes first-class support for styling MDX content.\n\n</Note>\n\n[mdx]: https://mdxjs.com\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/docs/src/pages/guides/server-side-rendering.mdx",
    "content": "export const title = 'Server-Side Rendering'\n\n# Server-Side Rendering\n\nBecause Rebass uses Emotion, no additional steps are required to support rendering on a server.\nEmotion will automatically inline performant, critical CSS without any additional effort required.\n\nSee the [Emotion docs](https://emotion.sh/docs/ssr) for more.\n"
  },
  {
    "path": "packages/docs/src/pages/guides/styled-components.mdx",
    "content": "import { Note } from '../..'\nexport const title = 'Using Styled Components'\n\n# Using Styled Components\n\nIf you'd prefer to use the Styled Components library instead of Emotion, you can import components from `rebass/styled-components`.\n\n```jsx\nimport React from 'react'\nimport { Box } from 'rebass/styled-components'\n\nexport default props =>\n  <Box>\n    Hello\n  </Box>\n```\n\n<Note>\nThe package will still install Emotion as a dependency, but it will not be included in the module or your application bundle.\n</Note>\n"
  },
  {
    "path": "packages/docs/src/pages/guides/theme-ui.mdx",
    "content": "import { Note } from '../..'\nexport const title = 'Theme UI'\n\n# Theme UI\n\n<Note>\n\nThis guide is a work-in-progress.\nIf you'd like to help make this better,\nplease open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).\n\n</Note>\n\n"
  },
  {
    "path": "packages/docs/src/pages/guides/using-rebass-without-context.mdx",
    "content": "import { Note } from '../..'\nexport const title = 'Using Rebass without Context'\n\n# Using Rebass without Context\n\nIf you'd like to use Rebass components without adding a theme to React context,\nyou can pass a `theme` object as a prop to any of the components.\n\n<Note>\n\nThis guide is a work-in-progress.\nIf you'd like to help make this better,\nplease open an issue or pull request on [GitHub](https://github.com/rebassjs/rebass).\n\n</Note>\n\n```jsx\nimport React from 'react'\nimport { Box } from 'rebass'\nimport theme from './theme'\n\nexport default props =>\n  <Box\n    {...props}\n    theme={theme}\n  />\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/heading.mdx",
    "content": "export const title = 'Heading'\n\n# Heading\n\nExtension of the Text component for headings\n\n```jsx live=true\n<Heading\n  fontSize={[ 5, 6, 7 ]}\n  color='primary'>\n  Hello\n</Heading>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/image.mdx",
    "content": "export const title = 'Image'\n\n# Image\n\nResponsive image component with variants\n\n```jsx live=true\n<Image\n  src={props.image}\n  sx={{\n    width: [ '100%', '50%' ],\n    borderRadius: 8,\n  }}\n/>\n```\n\n```jsx live=true\n<Image\n  src={props.image}\n  variant='avatar'\n/>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/index.mdx",
    "content": "import { Box, Flex, Button } from 'rebass'\nimport {\n  Banner,\n  NavGrid,\n  Container,\n  Grid,\n  LogoGrid,\n} from '..'\nimport Logo from '../components/logo'\n\n<Banner>\n<Box mt={5} />\n<LogoGrid>\n<Logo text='' size={192} />\n<div>\n\n# Rebass <br /> React primitive UI components<br />built with Styled System\n\n```sh\nnpm i rebass\n```\n\n</div>\n</LogoGrid>\n<Box my='auto' />\n<NavGrid>\n\n- [Getting Started](/getting-started)\n- [Props](/props)\n- [Theming](/theming)\n- [Variants](/variants)\n- [Extending](/extending)\n- [Box](/box)\n- [Flex](/flex)\n- [Text](/text)\n- [Heading](/heading)\n- [Button](/button)\n- [Link](/link)\n- [Image](/image)\n- [Card](/card)\n- [Forms](/forms)\n- [Guides](/guides)\n- [Recipes](/recipes)\n\n</NavGrid>\n</Banner>\n\n<Container py={5}>\n\n[![stars][]][github]\n[![build status][]][travis]\n[![downloads][]][npm]\n[![coverage][]][codecov]\n\n[stars]: https://flat.badgen.net/github/stars/rebassjs/rebass?color=33e\n[github]: https://github.com/rebassjs/rebass\n[build status]: https://flat.badgen.net/travis/rebassjs/rebass/master?color=33e\n[travis]: https://travis-ci.org/rebassjs/rebass\n[downloads]: https://flat.badgen.net/npm/dm/rebass?color=33e\n[npm]: https://npmjs.com/package/rebass\n[coverage]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass?color=33e\n[codecov]: https://codecov.io/github/rebassjs/rebass\n\n<Grid py={5} sx={{ fontWeight: 'bold' }}>\n\n- Start your design system without boiling the ocean\n- Build consistent UI with design constraints and user-defined scales\n- Best-in-class developer ergonomics with [Styled System][] props\n- First-class support for theming &\n  fully compatible with [Theme UI][]\n- Quick, mobile-first responsive styles with array-based syntax\n- Flexbox layout with the Box and Flex components\n- Flexibility built in for high design & development velocity\n- Minimal footprint\n\n</Grid>\n\n```jsx live=true\n<Flex\n  alignItems='center'\n  px={3}\n  py={4}\n  bg='muted'>\n  <Heading>Hello</Heading>\n  <Box mx='auto' />\n  <Button>Beep</Button>\n  <Button ml={2} variant='secondary'>Boop</Button>\n</Flex>\n```\n\n<Grid width={448} py={5}>\n\n- > “One of the best React component libs out there”\n\n  - [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)\n\n- > “Rebass is the Bootstrap of React.”\n\n  - [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)\n\n- > “A whopper component library built on styled-components. Responsive, systematic, scalable...the business!”\n\n  - [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)\n\n- > “Why the hell are we now putting CSS in Javascript? I’m losing my mind with web developers trying to control everything in the world with client-side javascript. What a mess.”\n\n  - [alttab](https://news.ycombinator.com/item?id=14705579)\n\n</Grid>\n\n## Get Started\n\n<Button as='a'\n  variant='big'\n  href='/getting-started'>\n  Read the docs\n</Button>\n\n</Container>\n\n\n[styled system]: https://styled-system.com\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/docs/src/pages/layout/index.mdx",
    "content": "import { Tiles } from '@rebass/layout'\nexport const title = 'Layout'\n\n# @rebass/layout\n\nThemeable layout components built with Rebass\n\n```sh\nnpm i @rebass/layout\n```\n\n## Tiles\n\n```jsx live\n<Tiles width={[96, null, 128]}>\n  <Image src={props.image} />\n  <Image src={props.image} />\n  <Image src={props.image} />\n  <Image src={props.image} />\n</Tiles>\n```\n\n```jsx live\n<Tiles columns={[2, null, 4]}>\n  <Image src={props.image} />\n  <Image src={props.image} />\n  <Image src={props.image} />\n  <Image src={props.image} />\n</Tiles>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/link.mdx",
    "content": "export const title = 'Link'\n\n# Link\n\nStyled link component\n\n```jsx live=true\n<Link href='https://rebassjs.org'>Link</Link>\n```\n```jsx live=true\n<Link variant='nav' href='https://rebassjs.org'>Link</Link>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/migrating.mdx",
    "content": "export const title = 'Migration'\n\n# Migration Guide\n\n## v4: What's New\n\n- New [`sx` prop](/props/#sx-prop) for theme-based styles\n- Use the `css` prop for un-themed, raw CSS values\n- No additional Babel configuration required for the `sx` or `css` props\n- Use the `sx` prop in MDX documents\n- Built-in support for themeable component [variants](/variants)\n- Fully compatible with [Theme UI][]\n\n[theme ui]: https://theme-ui.com\n\n## v4: Breaking Changes\n\n- The default package now uses Emotion. To use Rebass with Styled Components, import the components from `rebass/styled-components` instead.\n- The undocumented theme keys for `Box`, `Flex`, `Text`, `Heading`, `Link`, `Button`, `Image`, and `Card` are no longer supported. Use variants instead.\n- The `@rebass/grid` package has been renamed (back to) `reflexbox`\n- Heading: default `fontWeight` is now set to `heading`. Add styles to `theme.fontWeights` to customize the `heading` font weight.\n- Button no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`\n- Image no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`\n- Link no longer includes default styles. Add styles to `theme.variants.link` to customize link styles.\n- Card no longer supports the following props. Use the `sx` prop instead.\n  `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft`, `borderX`, `borderY`, `boxShadow`, `textShadow`, `background`, `backgroundImage`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`,\n\n\n"
  },
  {
    "path": "packages/docs/src/pages/props.mdx",
    "content": "export const title = 'Props'\n\n# Props\n\nAll Rebass components extend the base [Box](/box) component,\nand include [Styled System][] props for ensuring your design constraints are easily accessible,\nwhile allowing you the flexibility to create responsive designs inline in your components.\n\n## `sx` Prop\n\nThe `sx` prop accepts a style object, with easy access to values from your theme\nand the ability to quickly add responsive styles to any property using arrays as values.\nIf you've used [Theme UI][] or [Styled System][] before, this will probably seem familiar.\nIf you've used the Emotion `css` prop before, the `sx` prop works in a similar way,\nbut allows you to use values from your theme object.\n\nThe `sx` prop is built-in and does not require any additional configuration,\nwhich means it will work in any React app, such as Create React App, or in [MDX][] documents.\n\n```jsx live=true\n<Box\n  sx={{\n    color: 'primary', // theme.colors.primary\n    fontSize: 2,      // theme.fontSizes[2]\n    margin: 3,        // theme.space[3]\n  }}>\n  Hello\n</Box>\n```\n\n## Nested Selectors\n\nUse nested objects to apply pseudoclasses and other child selectors within the `sx` prop.\n\n```jsx live=true\n<Button\n  sx={{\n    ':hover': {\n      backgroundColor: 'tomato',\n    }\n  }}>\n  Beep\n</Button>\n```\n\n## Responsive Styles\n\nMobile-first responsive styles based on breakpoints defined in your theme can be quickly applied to\nany element using arrays as values in the `sx` prop, or with any of the shorthand style props below.\nThe first value in the array will apply to all screen widths, and each value after will be applied from that breakpoint and up.\n\nDefine breakpoints in your theme using an array of widths.\n\n```js\n// example theme\nexport default {\n  breakpoints: [ '40em', '52em', '64em' ],\n}\n```\n\nFor any individual CSS property, use an array as a value to quickly apply mobile-first responsive styles for that single property.\n\n```jsx\n<Box\n  sx={{\n    margin: [ 0, 1, 2 ],\n  }}\n/>\n```\n\nYou can also use standard CSS media query syntax for one-off cases or non-mobile-first styles.\n\n```jsx\n<Box\n  sx={{\n    display: 'block',\n    '@media screen and (max-width: 64em)': {\n      display: 'none',\n    }\n  }}\n/>\n```\n\nThe `sx` prop uses [Styled System CSS](https://styled-system.com/css) to pick up values from your theme\nand write responsive styles using the array syntax.\n\nIf you ever need to add styles that do not use values from your theme, use the `css` prop, which is available on all components, without the need for additional configuration.\n\n## `as` Prop\n\nThe underlying HTML element rendered in any component can be overridden by the `as` prop.\n\n```jsx\n<Heading as='h1'>Hello</Heading>\n```\n\n\n## Styled System Props\n\nIn addition to the `sx` prop, several [Styled System][] props are provided as ergonomic shortcuts.\nThese props allow you to quickly modify styles on a per-element basis throughout your application.\nThis level of flexibility in your UI component API\nmakes it easy to use values from your design system's constraints\nin situations that you might not have accounted for when creating your components.\n\nBecause each component is based on the same base Box component,\nthe props API for your entire design system can stay consistent,\nmaking it easier to *learn once, use everywhere.*\n\n## Colors\n\nUse the `color` and `bg` (or `backgroundColor`) props to add styles based on the `theme.colors` scale.\n\n```jsx live=true\n<Box color='white' bg='secondary' p={3}>\n  Hello\n</Box>\n```\n\n```jsx\n// Keys reference values in the color palette object\n<Text color='primary' />\n\n// Background color can be set with the `bg` prop\n<Button bg='secondary' />\n\n// Raw CSS values that do not map to a key in `theme.colors` can be used\n<Button bg='tomato' />\n```\n\n## Margin and Padding\n\nMargin and padding can be added to any element based on the `theme.space` scale.\nThe margin and padding props help promote consistency in layout\nwithout the need to add custom margin and padding declarations throughout an application.\nThe margin and padding props use a shorthand syntax, similar to other OOCSS approaches and many CSS libraries.\n\n```jsx live=true\n<Box\n  p={3}\n  mx={2}\n  my={4}\n  color='background'\n  bg='primary'>\n  Hello\n</Box>\n```\n\n- `m`: margin\n- `mt`: margin-top\n- `mr`: margin-right\n- `mb`: margin-bottom\n- `ml`: margin-left\n- `mx`: margin-left and margin-right\n- `my`: margin-top and margin-bottom\n- `p` : padding\n- `pt`: padding-top\n- `pr`: padding-right\n- `pb`: padding-bottom\n- `pl`: padding-left\n- `px`: padding-left and padding-right\n- `py`: padding-top and padding-bottom\n\n```jsx\n// Numbers reference steps on the spacing scale\n// e.g. 8px\n<Text m={2} />\n\n// Numbers greater than the length of `theme.space.length` are converted to pixels\n<Text my={256} />\n\n// Negative values can be used to add negative margins\n<Text mx={-2} />\n\n// Strings can be used for other values\n<Text mx='auto' />\n\n// Arrays can be used for mobile-first responsive styles\n<Text m={[ 0, 1, 2 ]} />\n```\n\n## Typography\n\nUse the typography props to change text styles based on values defined in your theme.\n\n```jsx live=true\n<Text\n  fontFamily='monospace'\n  fontSize={[ 4, 5 ]}\n  fontWeight='bold'\n  lineHeight='body'>\n  Hello\n</Text>\n```\n\n- `fontSize`\n- `fontFamily`\n- `fontWeight`\n- `lineHeight`\n- `letterSpacing`\n- `textAlign`\n- `fontStyle`\n\n## Layout\n\nUse layout props to change the width, height, display and other values on any element.\n\n```jsx live=true\n<Box\n  display='inline-block'\n  width={128}\n  height={128}\n  p={3}\n  color='white'\n  bg='primary'>\n  Hello\n</Box>\n```\n\n- `width`\n- `minWidth`\n- `maxWidth`\n- `height`\n- `minHeight`\n- `maxHeight`\n- `display`\n- `size` (width and height)\n- `verticalAlign`\n- `overflow`\n\n### Width\n\nThe `width` prop includes an additional ergonomic shorthand for applying percentage-based widths.\nAny fractional number from `0` to `1` will be converted to a percentage based width,\nallowing you to quickly define responsive grid layouts directly in the components where you need them.\n\n```jsx\n<Box\n  width={[\n    1,    // 100% width on small screens\n    1/2,  // 50% width from the next breakpoint and up\n    1/3,  // 33% width from the next breakpoint and up\n    1/4   // 25% width for all larger breakpoints\n  ]}\n/>\n```\n\n## Flexbox\n\nUse flexbox props to apply layout styles.\n\n```jsx live=true\n<Flex>\n  <Box\n    flex='1 1 auto'\n    p={3}\n    color='white'\n    bg='primary'>\n    Beep\n  </Box>\n  <Box p={3} color='white' bg='secondary'>\n    Boop\n  </Box>\n</Flex>\n```\n\n- `alignItems`\n- `alignContent`\n- `justifyItems`\n- `justifyContent`\n- `flexWrap`\n- `flexDirection`\n- `flex`\n- `flexGrow`\n- `flexShrink`\n- `flexBasis`\n- `justifySelf`\n- `alignSelf`\n- `order`\n\nFor a full reference of available props, see the [Reflexbox docs](/reflexbox#styled-system-props).\n\n[styled system]: https://styled-system.com\n[theme ui]: https://theme-ui.com\n[space]: https://styled-system.com/\n[color]: https://styled-system.com/\n[mdx]: https://mdxjs.com\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/avatar.mdx",
    "content": "export const title = 'Avatar'\n\n# Avatar\n\n```jsx live=true\n<Image\n  src={props.image}\n  sx={{\n    width: 48,\n    height: 48,\n    borderRadius: 9999,\n  }}\n/>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/background-image-card.mdx",
    "content": "\n# Background Image Card\n\n```jsx live=true\n<Box\n  sx={{\n    px: 4,\n    py: 6,\n    backgroundImage: 'url(https://source.unsplash.com/random/1024x768?sky)',\n    backgroundSize: 'cover',\n    borderRadius: 8,\n    color: 'white',\n    bg: 'gray',\n  }}>\n  <Heading\n    textAlign='center'\n    fontSize={[ 5, 6 ]}>\n    Background Image\n  </Heading>\n</Box>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/badge.mdx",
    "content": "export const title = 'Badge'\n\n# Badge\n\n```jsx live=true\n<Box\n  sx={{\n    display: 'inline-block',\n    color: 'white',\n    bg: 'primary',\n    px: 2,\n    py: 1,\n    borderRadius: 9999,\n  }}>\n  Badge\n</Box>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/container.mdx",
    "content": "export const title = 'Container'\n\n# Container\n\n```jsx live=true\n<Box\n  sx={{\n    maxWidth: 512,\n    mx: 'auto',\n    px: 3,\n  }}>\n  Container\n</Box>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/flexbox-align.mdx",
    "content": "\n# Flexbox Align\n\n```jsx live=true\n<Flex alignItems='center'>\n  <Box width={1/3}>\n    <Heading\n      py={4}\n      fontSize={[ 5, 6 ]}\n      color='background'\n      bg='primary'>\n      Hello\n    </Heading>\n  </Box>\n  <Box width={1/3} ml='auto'>\n    <Text>Grid</Text>\n  </Box>\n</Flex>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/flexbox-grid.mdx",
    "content": "export const title = 'Flexbox Grid'\n\n# Flexbox Grid\n\n```jsx live=true\n<Flex mx={-2}>\n  <Box width={1/2} px={2}>\n    <Text p={1} color='background' bg='primary'>\n      Half\n    </Text>\n  </Box>\n  <Box width={1/2} px={2}>\n    <Text p={1} color='background' bg='primary'>\n      Half\n    </Text>\n  </Box>\n</Flex>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/flexbox-wrap.mdx",
    "content": "export const title = 'Flexbox Wrap'\n\n# Flexbox Wrap\n\n```jsx live=true\n<Flex flexWrap='wrap' mx={-2}>\n  <Box px={2} py={2} width={1/2}>\n    <Text p={1} color='background' bg='primary'>1/2</Text>\n  </Box>\n  <Box px={2} py={2} width={1/2}>\n    <Text p={1} color='background' bg='primary'>1/2</Text>\n  </Box>\n  <Box px={2} py={2} width={1/3}>\n    <Text p={1} color='background' bg='primary'>1/3</Text>\n  </Box>\n  <Box px={2} py={2} width={1/3}>\n    <Text p={1} color='background' bg='primary'>1/3</Text>\n  </Box>\n  <Box px={2} py={2} width={1/3}>\n    <Text p={1} color='background' bg='primary'>1/3</Text>\n  </Box>\n  <Box px={2} py={2} width={1/4}>\n    <Text p={1} color='background' bg='primary'>1/4</Text>\n  </Box>\n  <Box px={2} py={2} width={1/4}>\n    <Text p={1} color='background' bg='primary'>1/4</Text>\n  </Box>\n  <Box px={2} py={2} width={1/4}>\n    <Text p={1} color='background' bg='primary'>1/4</Text>\n  </Box>\n  <Box px={2} py={2} width={1/4}>\n    <Text p={1} color='background' bg='primary'>1/4</Text>\n  </Box>\n</Flex>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/image-card.mdx",
    "content": "\n# Image Card\n\n```jsx live=true\n<Flex>\n  <Card width={[ 256, 320 ]} mx='auto'>\n    <Image src='https://source.unsplash.com/random/512x384?space' />\n    <Text>\n      Image Card\n    </Text>\n  </Card>\n</Flex>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/index.mdx",
    "content": "import { MDXProvider } from '@mdx-js/react'\nimport { RecipeCard, Grid } from '../..'\nimport FlexboxGrid from './flexbox-grid.mdx'\nimport FlexboxWrap from './flexbox-wrap.mdx'\nimport FlexboxAlign from './flexbox-align.mdx'\nimport ImageCard from './image-card.mdx'\nimport BackgroundImageCard from './background-image-card.mdx'\nimport NavBar from './nav-bar.mdx'\nimport VideoEmbed from './video-embed.mdx'\nimport Container from './container.mdx'\n\nimport Avatar from './avatar.mdx'\nimport Badge from './badge.mdx'\nimport NavLink from './nav-link.mdx'\n\nexport const title = 'Recipes'\n\n# Recipes\n\nQuick copy-and-paste code examples using Rebass.\n\n<MDXProvider\ncomponents={{\n  wrapper: RecipeCard,\n}}>\n<Grid>\n\n- <FlexboxGrid href='/recipes/flexbox-grid' />\n- <FlexboxWrap href='/recipes/flexbox-wrap' />\n- <FlexboxAlign href='/recipes/flexbox-align' />\n- <NavBar href='/recipes/nav-bar' />\n- <ImageCard href='/recipes/image-card' />\n- <BackgroundImageCard href='/recipes/background-image-card' />\n- <VideoEmbed href='/recipes/video-embed' />\n- <Container href='/recipes/container' />\n- <Avatar href='/recipes/avatar' />\n- <Badge href='/recipes/badge' />\n- <NavLink href='/recipes/nav-link' />\n\n</Grid>\n</MDXProvider>\n\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/nav-bar.mdx",
    "content": "\n# Nav Bar\n\n```jsx live=true\n<Flex\n  px={2}\n  color='white'\n  bg='black'\n  alignItems='center'>\n  <Text p={2} fontWeight='bold'>Rebass</Text>\n  <Box mx='auto' />\n  <Link variant='nav' href='#!'>\n    Profile\n  </Link>\n</Flex>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/nav-link.mdx",
    "content": "export const title = 'Nav Link'\n\n# Nav Link\n\n```jsx live=true\n<Link\n  sx={{\n    display: 'inline-block',\n    fontWeight: 'bold',\n    px: 2,\n    py: 1,\n    color: 'inherit',\n  }}>\n  Nav Link\n</Link>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/recipes/video-embed.mdx",
    "content": "\n# Video Embed\n\n```jsx live=true\n<Box\n  sx={{\n    width: '100%',\n    height: 0,\n    paddingBottom: (900 / 16) + '%',\n    position: 'relative',\n    overflow: 'hidden',\n    '& > iframe': {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      top: 0,\n      bottom: 0,\n      left: 0,\n      border: 0\n    }\n  }}>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/GNCd_ERZvZM'\n    frameBorder='0'\n    allowFullScreen\n  />\n</Box>\n```\n"
  },
  {
    "path": "packages/docs/src/pages/reflexbox.mdx",
    "content": "import Readme from 'reflexbox/README.md'\n\nexport const title = 'Reflexbox'\n\n<Readme />\n"
  },
  {
    "path": "packages/docs/src/pages/space.mdx",
    "content": "import Readme from '@rebass/space/README.md'\nexport const title = 'Space'\n\n<Readme />\n"
  },
  {
    "path": "packages/docs/src/pages/text.mdx",
    "content": "export const title = 'Text'\n\n# Text\n\nResponsive typography component\n\n```jsx live=true\n<Text\n  fontSize={[ 3, 4, 5 ]}\n  fontWeight='bold'\n  color='primary'>\n  Text\n</Text>\n```\n\n"
  },
  {
    "path": "packages/docs/src/pages/theming.mdx",
    "content": "export const title = 'Theming'\n\n# Theming\n\nRebass components are built with themeability in mind.\nAll colors, typographic styles, layout styles, and component variants can be completely customized with theming.\n\n## ThemeProvider\n\nTo apply themes to Rebass components, add a [ThemeProvider][] component to the root of your application and pass a `theme` object as a prop.\n\nIf you're using Emotion by itself, install the `emotion-theming` package.\nIf you're using Rebass with [Theme UI][], use its `ThemeProvider` or the `gatsby-plugin-theme-ui` package.\n\n```jsx\nimport React from 'react'\nimport theme from './theme'\nimport { ThemeProvider } from 'emotion-theming'\n// or for use with Theme UI:\n// import { ThemeProvider } from 'theme-ui'\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    {props.children}\n  </ThemeProvider>\n```\n\nRebass follows the [Theme Specification][],\nwhich allows you to define thematic values in a more portable format.\nThemes created for [Styled System][] or [Theme UI][] will work with Rebass with no additional configuration required.\nThis also means that themes created for use with Rebass will work in other applications that follow the same specification.\n\n## Example\n\nThe following is an example theme, showing *some* of the design constraints that can be defined as scales,\nincluding colors, typography, layouts, and variants.\n\n```js\n// example theme.js\nexport default {\n  breakpoints: ['40em', '52em', '64em'],\n  fontSizes: [\n    12, 14, 16, 20, 24, 32, 48, 64\n  ],\n  colors: {\n    blue: '#07c',\n    lightgray: '#f6f6ff'\n  },\n  space: [\n    0, 4, 8, 16, 32, 64, 128, 256\n  ],\n  fonts: {\n    body: 'system-ui, sans-serif',\n    heading: 'inherit',\n    monospace: 'Menlo, monospace',\n  },\n  fontWeights: {\n    body: 400,\n    heading: 700,\n    bold: 700,\n  },\n  lineHeights: {\n    body: 1.5,\n    heading: 1.25,\n  },\n  shadows: {\n    small: '0 0 4px rgba(0, 0, 0, .125)',\n    large: '0 0 24px rgba(0, 0, 0, .125)'\n  },\n  variants: {\n  },\n  text: {\n  },\n  buttons: {\n    primary: {\n      color: 'white',\n      bg: 'primary',\n    }\n  }\n}\n```\n\n## Preset\n\nTo quickly get started without creating a custom theme, install the Rebass Preset package and use it in place of a custom theme.\n\n```sh\nnpm i @rebass/preset\n```\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport preset from '@rebass/preset'\n\nexport default props =>\n  <ThemeProvider theme={preset}>\n    {props.children}\n  </ThemeProvider>\n```\n\n## Demo\n\nEdit the theme in the demo below to see how colors, space, and typographic scales affect the Button component.\n\n```jsx live=true\n<ThemeProvider\n  theme={{\n    colors: {\n      background: 'black',\n      primary: 'tomato',\n    },\n    space: [ 0, 6, 12, 24, 48 ],\n    fontSizes: [ 14, 16, 18, 20, 24 ],\n    radii: {\n      default: 12,\n    }\n  }}>\n  <Button>Beep</Button>\n</ThemeProvider>\n```\n\n[theme specification]: https://github.com/system-ui/theme-specification\n[ThemeProvider]: https://www.styled-components.com/docs/advanced#theming\n[styled system]: https://github.com/jxnblk/styled-system\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/docs/src/pages/variants.mdx",
    "content": "export const title = 'Variants'\n\n# Variants\n\nAll Rebass components accept a `variant` prop, which allows you to define stylistic variations in your theme and apply the styles on a per-element basis.\n\nFor example, with the following defined in the theme object:\n\n```js\n// example theme with variants\nexport default {\n  colors: {\n    text: 'black',\n    background: 'white',\n    primary: 'tomato',\n  },\n  shadows: {\n    card: '0 0 4px rgba(0, 0, 0, 0.125)',\n  },\n  variants: {\n    card: {\n      p: 2,\n      bg: 'background',\n      boxShadow: 'card',\n      borderRadius: 2,\n    },\n    badge: {\n      display: 'inline-block',\n      p: 1,\n      color: 'white',\n      bg: 'primary',\n      borderRadius: 2,\n    }\n  },\n}\n```\n\nThe `Box` component can use a variant style to render with preset card or badge styles.\n\n```jsx live=true\n<Box variant='card' width={256}>\n  Card\n  <Box variant='badge'>\n    Badge\n  </Box>\n</Box>\n```\n\nBy default, Rebass components will use style objects defined in `theme.variants`.\nThe `Text` and `Heading` components use a custom `theme.text` object, and `Button` uses `theme.buttons`.\n\nComponent | Theme Key | Default Variant\n---|---|---\n`Box` | `variants` | N/A\n`Flex` | `variants` | N/A\n`Text` | `text` | N/A\n`Heading` | `text` | `heading`\n`Link` | `variants` | `link`\n`Button` | `buttons` | `primary`\n`Image` | `variants` | N/A\n`Card` | `variants` | `card`\n\nAny object in your theme can be used as a variant, and the values use dot notation for deeply nested values.\n\n```jsx\n// example variant with dot notation\n<Box variant='some.deeply.nested.object' />\n```\n"
  },
  {
    "path": "packages/docs/static/_redirects",
    "content": "/Box        /box\n/Flex       /flex\n/Text       /text\n/Heading    /heading\n/Button     /button\n/Link       /link\n/Image      /image\n/Card       /card\n/advanced   /guides\n/grid       /reflexbox\n"
  },
  {
    "path": "packages/forms/.gitignore",
    "content": "styled-components\ndist\n"
  },
  {
    "path": "packages/forms/.npmignore",
    "content": "test\n"
  },
  {
    "path": "packages/forms/README.md",
    "content": "\n# @rebass/forms\n\nAccessible and themeable form components for use with Rebass or Theme UI.\n\n```sh\nnpm i @rebass/forms\n```\n\n```jsx\nimport React from 'react'\nimport { Box, Flex } from 'rebass'\nimport {\n  Label,\n  Input,\n  Select,\n  Textarea,\n  Radio,\n  Checkbox,\n} from '@rebass/forms'\n\nexport default () =>\n  <Box\n    as='form'\n    onSubmit={e => e.preventDefault()}\n    py={3}>\n    <Flex mx={-2} mb={3}>\n      <Box width={1/2} px={2}>\n        <Label htmlFor='name'>Name</Label>\n        <Input\n          id='name'\n          name='name'\n          defaultValue='Jane Doe'\n        />\n      </Box>\n      <Box width={1/2} px={2}>\n        <Label htmlFor='location'>Location</Label>\n        <Select\n          id='location'\n          name='location'\n          defaultValue='NYC'>\n          <option>NYC</option>\n          <option>DC</option>\n          <option>ATX</option>\n          <option>SF</option>\n          <option>LA</option>\n        </Select>\n      </Box>\n    </Flex>\n    <Flex mx={-2} flexWrap='wrap'>\n      <Label width={[ 1/2, 1/4 ]} p={2}>\n        <Radio\n          id='beep'\n          name='beep'\n          value='beep'\n          defaultChecked\n        />\n        Beep\n      </Label>\n      <Label width={[ 1/2, 1/4 ]} p={2}>\n        <Radio\n          id='boop'\n          name='beep'\n          value='boop'\n        />\n        Boop\n      </Label>\n      <Label width={[1/2, 1/4]} p={2}>\n        <Checkbox\n          id='remember'\n          name='remember'\n        />\n        Remember Me\n      </Label>\n      <Box px={2} ml='auto'>\n        <Button>\n          Beep\n        </Button>\n      </Box>\n    </Flex>\n  </Box>\n```\n\nSee https://rebassjs.org/forms for full documentation.\n\n"
  },
  {
    "path": "packages/forms/package.json",
    "content": "{\n  \"name\": \"@rebass/forms\",\n  \"version\": \"4.0.6\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.esm.js\",\n  \"scripts\": {\n    \"prepare\": \"rebass-bundler\"\n  },\n  \"dependencies\": {\n    \"reflexbox\": \"^4.0.6\"\n  },\n  \"repository\": \"rebassjs/rebass\",\n  \"bugs\": {\n    \"url\": \"https://github.com/rebassjs/rebass/issues\"\n  },\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/forms/src/index.js",
    "content": "import React, { forwardRef } from 'react'\nimport { Box, Flex } from 'reflexbox'\nimport { props as systemProps } from '@styled-system/should-forward-prop'\n\nconst rebassProps = [\n  ...systemProps,\n  'sx',\n  'variant',\n]\n\nconst PRE = new RegExp(`^(${rebassProps.join('|')})$`)\nconst MRE = /^m[trblxy]?$/\n\nconst getProps = (test) => (props) => {\n  const next = {}\n  for (const key in props) {\n    if (test(key || '')) next[key] = props[key]\n  }\n  return next\n}\n\nconst getSystemProps = getProps(k => PRE.test(k))\nconst getMarginProps = getProps(k => MRE.test(k))\nconst omitMarginProps = getProps(k => !MRE.test(k))\n\nconst SVG = ({ size = 24, ...props }) =>\n  <Box\n    as='svg'\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width={24}\n    height={24}\n    viewBox=\"0 0 24 24\"\n    fill='currentcolor'\n    {...props}\n  />\n\nexport const Label = forwardRef((props, ref) =>\n  <Flex\n    ref={ref}\n    as='label'\n    tx='forms'\n    variant='label'\n    {...props}\n    __css={{\n      width: '100%',\n    }}\n  />\n)\n\nexport const Input = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='input'\n    type='text'\n    tx='forms'\n    variant='input'\n    {...props}\n    __css={{\n      display: 'block',\n      width: '100%',\n      p: 2,\n      appearance: 'none',\n      fontSize: 'inherit',\n      lineHeight: 'inherit',\n      border: '1px solid',\n      borderRadius: 'default',\n      color: 'inherit',\n      bg: 'transparent',\n    }}\n  />\n)\n\nconst DownArrow = props =>\n  <SVG {...props}>\n    <path d=\"M7 10l5 5 5-5z\" />\n  </SVG>\n\nexport const Select = forwardRef((props, ref) =>\n  <Flex {...getMarginProps(props)}>\n    <Box\n      ref={ref}\n      as='select'\n      tx='forms'\n      variant='select'\n      {...omitMarginProps(props)}\n      __css={{\n        display: 'block',\n        width: '100%',\n        p: 2,\n        appearance: 'none',\n        fontSize: 'inherit',\n        lineHeight: 'inherit',\n        border: '1px solid',\n        borderRadius: 'default',\n        color: 'inherit',\n        bg: 'transparent',\n      }}\n    />\n    <DownArrow\n      sx={{\n        ml: -28,\n        alignSelf: 'center',\n        pointerEvents: 'none',\n      }}\n    />\n  </Flex>\n)\n\nexport const Textarea = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='textarea'\n    tx='forms'\n    variant='textarea'\n    {...props}\n    __css={{\n      display: 'block',\n      width: '100%',\n      p: 2,\n      appearance: 'none',\n      fontSize: 'inherit',\n      lineHeight: 'inherit',\n      border: '1px solid',\n      borderRadius: 'default',\n      color: 'inherit',\n      bg: 'transparent',\n    }}\n  />\n)\n\nconst RadioChecked = props =>\n  <SVG {...props}>\n    <path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/>\n  </SVG>\n\nconst RadioUnchecked = props =>\n  <SVG {...props}>\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"/>\n  </SVG>\n\nconst RadioIcon = props =>\n  <>\n    <RadioChecked\n      {...props}\n      __css={{\n        display: 'none',\n        'input:checked ~ &': {\n          display: 'block',\n        }\n      }}\n    />\n    <RadioUnchecked\n      {...props}\n      __css={{\n        display: 'block',\n        'input:checked ~ &': {\n          display: 'none',\n        }\n      }}\n    />\n  </>\n\nexport const Radio = forwardRef(({\n  className,\n  sx,\n  variant = 'radio',\n  ...props\n}, ref) => (\n  <Box>\n    <Box\n      ref={ref}\n      as='input'\n      type='radio'\n      {...props}\n      sx={{\n        position: 'absolute',\n        opacity: 0,\n        zIndex: -1,\n        width: 1,\n        height: 1,\n        overflow: 'hidden',\n      }}\n    />\n    <Box\n      as={RadioIcon}\n      aria-hidden='true'\n      tx='forms'\n      variant={variant}\n      className={className}\n      sx={sx}\n      {...getSystemProps(props)}\n      __css={{\n        mr: 2,\n        borderRadius: 9999,\n        color: 'gray',\n        'input:checked ~ &': {\n          color: 'primary',\n        },\n        'input:focus ~ &': {\n          bg: 'highlight',\n        }\n      }}\n    />\n  </Box>\n))\n\nconst CheckboxChecked = props =>\n  <SVG {...props}>\n    <path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/>\n  </SVG>\n\nconst CheckboxUnchecked = props =>\n  <SVG {...props}>\n    <path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/>\n  </SVG>\n\nconst CheckboxIcon = props =>\n  <>\n    <CheckboxChecked\n      {...props}\n      __css={{\n        display: 'none',\n        'input:checked ~ &': {\n          display: 'block',\n        }\n      }}\n    />\n    <CheckboxUnchecked\n      {...props}\n      __css={{\n        display: 'block',\n        'input:checked ~ &': {\n          display: 'none',\n        }\n      }}\n    />\n  </>\n\nexport const Checkbox= forwardRef(({\n  className,\n  sx,\n  variant = 'checkbox',\n  ...props\n}, ref) =>\n  <Box>\n    <Box\n      ref={ref}\n      as='input'\n      type='checkbox'\n      {...props}\n      sx={{\n        position: 'absolute',\n        opacity: 0,\n        zIndex: -1,\n        width: 1,\n        height: 1,\n        overflow: 'hidden',\n      }}\n    />\n    <Box\n      as={CheckboxIcon}\n      aria-hidden='true'\n      tx='forms'\n      variant={variant}\n      className={className}\n      sx={sx}\n      {...getSystemProps(props)}\n      __css={{\n        mr: 2,\n        borderRadius: 4,\n        color: 'gray',\n        'input:checked ~ &': {\n          color: 'primary',\n        },\n        'input:focus ~ &': {\n          color: 'primary',\n          bg: 'highlight',\n        },\n      }}\n    />\n  </Box>\n)\n\nexport const Slider = forwardRef(({\n  ...props\n}, ref) =>\n  <Box\n    ref={ref}\n    as='input'\n    type='range'\n    tx='forms'\n    variant='slider'\n    {...props}\n    __css={{\n      display: 'block',\n      width: '100%',\n      height: 4,\n      my: 2,\n      cursor: 'pointer',\n      appearance: 'none',\n      borderRadius: 9999,\n      color: 'inherit',\n      bg: 'gray',\n      ':focus': {\n        outline: 'none',\n        color: 'primary',\n      },\n      '&::-webkit-slider-thumb': {\n        appearance: 'none',\n        width: 16,\n        height: 16,\n        bg: 'currentcolor',\n        border: 0,\n        borderRadius: 9999,\n        variant: 'forms.slider.thumb',\n      },\n    }}\n  />\n)\n\nexport const Switch = forwardRef(({\n  checked,\n  ...props\n}, ref) =>\n  <Box\n    ref={ref}\n    as='button'\n    type='button'\n    role='switch'\n    tx='forms'\n    variant='switch'\n    aria-checked={checked}\n    {...props}\n    __css={{\n      appearance: 'none',\n      m: 0,\n      p: 0,\n      width: 40,\n      height: 24,\n      color: 'primary',\n      bg: 'transparent',\n      border: '1px solid',\n      borderColor: 'primary',\n      borderRadius: 9999,\n      '&[aria-checked=true]': {\n        bg: 'primary',\n      },\n      ':focus': {\n        outline: 'none',\n        boxShadow: '0 0 0 2px'\n      },\n    }}>\n    <Box\n      aria-hidden\n      style={{\n        transform: checked ? 'translateX(16px)' : 'translateX(0)',\n      }}\n      sx={{\n        mt: '-1px',\n        ml: '-1px',\n        width: 24,\n        height: 24,\n        borderRadius: 9999,\n        border: '1px solid',\n        borderColor: 'primary',\n        bg: 'background',\n        transitionProperty: 'transform',\n        transitionTimingFunction: 'ease-out',\n        transitionDuration: '0.1s',\n        variant: 'forms.switch.thumb',\n      }}\n    />\n  </Box>\n)\n"
  },
  {
    "path": "packages/forms/test/__snapshots__/index.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Checkbox renders 1`] = `\n.emotion-3 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n}\n\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.emotion-1 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: none;\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  margin-right: 8px;\n  border-radius: 4px;\n  color: gray;\n}\n\ninput:checked ~ .emotion-1 {\n  display: block;\n}\n\ninput:checked ~ .emotion-1 {\n  color: primary;\n}\n\ninput:focus ~ .emotion-1 {\n  color: primary;\n  background-color: highlight;\n}\n\n.emotion-2 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: block;\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  margin-right: 8px;\n  border-radius: 4px;\n  color: gray;\n}\n\ninput:checked ~ .emotion-2 {\n  display: none;\n}\n\ninput:checked ~ .emotion-2 {\n  color: primary;\n}\n\ninput:focus ~ .emotion-2 {\n  color: primary;\n  background-color: highlight;\n}\n\n<div\n  className=\"emotion-3\"\n>\n  <input\n    className=\"emotion-0\"\n    type=\"checkbox\"\n  />\n  <svg\n    aria-hidden=\"true\"\n    className=\"emotion-1\"\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n    />\n  </svg>\n  <svg\n    aria-hidden=\"true\"\n    className=\"emotion-2\"\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Input renders 1`] = `\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: block;\n  width: 100%;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  font-size: inherit;\n  line-height: inherit;\n  border: 1px solid;\n  border-radius: default;\n  color: inherit;\n  background-color: transparent;\n}\n\n<input\n  className=\"emotion-0\"\n  type=\"text\"\n/>\n`;\n\nexports[`Label renders 1`] = `\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  width: 100%;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n<label\n  className=\"emotion-0\"\n/>\n`;\n\nexports[`Radio renders 1`] = `\n.emotion-3 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n}\n\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.emotion-1 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: none;\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  margin-right: 8px;\n  border-radius: 9999px;\n  color: gray;\n}\n\ninput:checked ~ .emotion-1 {\n  display: block;\n}\n\ninput:checked ~ .emotion-1 {\n  color: primary;\n}\n\ninput:focus ~ .emotion-1 {\n  background-color: highlight;\n}\n\n.emotion-2 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: block;\n  width: 24px;\n  height: 24px;\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  margin-right: 8px;\n  border-radius: 9999px;\n  color: gray;\n}\n\ninput:checked ~ .emotion-2 {\n  display: none;\n}\n\ninput:checked ~ .emotion-2 {\n  color: primary;\n}\n\ninput:focus ~ .emotion-2 {\n  background-color: highlight;\n}\n\n<div\n  className=\"emotion-3\"\n>\n  <input\n    className=\"emotion-0\"\n    type=\"radio\"\n  />\n  <svg\n    aria-hidden=\"true\"\n    className=\"emotion-1\"\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n    />\n  </svg>\n  <svg\n    aria-hidden=\"true\"\n    className=\"emotion-2\"\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Select renders 1`] = `\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: block;\n  width: 100%;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  font-size: inherit;\n  line-height: inherit;\n  border: 1px solid;\n  border-radius: default;\n  color: inherit;\n  background-color: transparent;\n}\n\n.emotion-2 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.emotion-1 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  margin-left: -28px;\n  -webkit-align-self: center;\n  -ms-flex-item-align: center;\n  align-self: center;\n  pointer-events: none;\n  width: 24px;\n  height: 24px;\n}\n\n<div\n  className=\"emotion-2\"\n>\n  <select\n    className=\"emotion-0\"\n  />\n  <svg\n    className=\"emotion-1\"\n    fill=\"currentcolor\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7 10l5 5 5-5z\"\n    />\n  </svg>\n</div>\n`;\n\nexports[`Textarea renders 1`] = `\n.emotion-0 {\n  box-sizing: border-box;\n  margin: 0;\n  min-width: 0;\n  display: block;\n  width: 100%;\n  padding: 8px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  font-size: inherit;\n  line-height: inherit;\n  border: 1px solid;\n  border-radius: default;\n  color: inherit;\n  background-color: transparent;\n}\n\n<textarea\n  className=\"emotion-0\"\n/>\n`;\n"
  },
  {
    "path": "packages/forms/test/index.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { render } from '@testing-library/react'\nimport { matchers } from 'jest-emotion'\nimport {\n  Label,\n  Input,\n  Select,\n  Textarea,\n  Radio,\n  Checkbox\n} from '../src'\n\nexpect.extend(matchers)\n\nconst renderJSON = el => renderer.create(el).toJSON()\n\ndescribe('Label', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Label />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Label ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('LABEL')\n  })\n})\n\ndescribe('Input', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Input />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Input ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('INPUT')\n  })\n})\n\ndescribe('Select', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Select />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Select ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('SELECT')\n  })\n\n  test('margin props are applied to the wrapping element', () => {\n    const json = renderJSON(\n      <Select mb={3} mt={2} />\n    )\n    expect(json).toHaveStyleRule('margin-top', '8px')\n    expect(json).toHaveStyleRule('margin-bottom', '16px')\n  })\n})\n\ndescribe('Textarea', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Textarea />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Textarea ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('TEXTAREA')\n  })\n})\n\ndescribe('Radio', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Radio />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Radio ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('INPUT')\n    expect(ref.current.type).toBe('radio')\n  })\n})\n\ndescribe('Checkbox', () => {\n  test('renders', () => {\n    const json = renderJSON(\n      <Checkbox />\n    )\n    expect(json).toMatchSnapshot()\n  })\n  test('passes ref', () => {\n    const ref = React.createRef(null)\n    render(\n      <Checkbox ref={ref} />\n    )\n    expect(ref.current.tagName).toBe('INPUT')\n    expect(ref.current.type).toBe('checkbox')\n  })\n})\n"
  },
  {
    "path": "packages/layout/.gitignore",
    "content": "dist\nstyled-components\n"
  },
  {
    "path": "packages/layout/.npmignore",
    "content": "test\nbabel.config.js\n"
  },
  {
    "path": "packages/layout/README.md",
    "content": "\n@rebass/layout\n\nhttps://rebassjs.org/layout\n"
  },
  {
    "path": "packages/layout/package.json",
    "content": "{\n  \"name\": \"@rebass/layout\",\n  \"version\": \"4.0.6\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.esm.js\",\n  \"scripts\": {\n    \"prepare\": \"rebass-bundler\"\n  },\n  \"dependencies\": {\n    \"reflexbox\": \"^4.0.6\"\n  },\n  \"repository\": \"rebassjs/rebass\",\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  }\n}\n"
  },
  {
    "path": "packages/layout/src/index.js",
    "content": "import React, { forwardRef } from 'react'\nimport { Box } from 'reflexbox'\n\nconst px = n => typeof n === 'number' ? n + 'px' : n\n\nconst widthToColumns = width => Array.isArray(width)\n  ? width.map(widthToColumns)\n  : !!width && `repeat(auto-fit, minmax(${px(width)}, 1fr))`\n\nconst countToColumns = n => Array.isArray(n)\n  ? n.map(countToColumns)\n  : !!n && `repeat(${n}, 1fr)`\n\nexport const Tiles = forwardRef(({\n  width,\n  columns,\n  gap = 3,\n  ...props\n}, ref) => {\n  const gridTemplateColumns = !!width\n    ? widthToColumns(width)\n    : countToColumns(columns)\n  return (\n    <Box\n      ref={ref}\n      tx='layout'\n      variant='tiles'\n      {...props}\n      __css={{\n        display: 'grid',\n        gridGap: gap,\n        gridTemplateColumns,\n      }}\n    />\n  )\n})\n"
  },
  {
    "path": "packages/preset/LICENSE.md",
    "content": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n"
  },
  {
    "path": "packages/preset/README.md",
    "content": "\n# @rebass/preset\n\nBase theme preset for use with [Rebass][]\n\n```sh\nnpm i @rebass/preset\n```\n\n## Usage\n\nFor general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport theme from '@rebass/preset'\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    {props.children}\n  </ThemeProvider>\n```\n\nFor use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.\n\n```jsx\nimport { ThemeProvider } from 'theme-ui'\n```\n\nOr, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.\n\n```js\n// src/gatsby-plugin-theme-ui/index.js\nimport preset from '@rebass/preset'\n\nexport default {\n  ...preset\n}\n```\n\n## Customizing\n\nThe base theme object can be customized by using either `deepmerge` or `lodash.merge` to deeply merge objects.\n\n```js\nimport merge from 'lodash.merge'\nimport preset from '@rebass/preset'\n\nexport default merge(preset, {\n  colors: {\n    // custom primary color\n    primary: 'tomato',\n  }\n})\n```\n\n[MIT License](LICENSE.md)\n\n[rebass]: https://rebassjs.org\n[emotion]: https://emotion.sh\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/preset/package.json",
    "content": "{\n  \"name\": \"@rebass/preset\",\n  \"version\": \"4.0.5\",\n  \"description\": \"Base theme preset for use with Rebass\",\n  \"main\": \"dist/index.js\",\n  \"scripts\": {\n    \"prepare\": \"babel src -d dist --root-mode upward\",\n    \"watch\": \"babel src -d dist --watch --root-mode upward\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-component\",\n    \"ui\",\n    \"design-system\",\n    \"styled-system\",\n    \"styled-components\",\n    \"emotion\",\n    \"theming\",\n    \"theme-ui\"\n  ],\n  \"author\": \"Brent Jackson\",\n  \"repository\": \"rebassjs/rebass\",\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/preset/src/index.js",
    "content": "// default theme preset\n\nexport const preset = {\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#07c',\n    secondary: '#30c',\n    muted: '#f6f6f9',\n    gray: '#dddddf',\n    highlight: 'hsla(205, 100%, 40%, 0.125)',\n  },\n  fonts: {\n    body: 'system-ui, sans-serif',\n    heading: 'inherit',\n    monospace: 'Menlo, monospace',\n  },\n  fontSizes: [\n    12, 14, 16, 20, 24, 32, 48, 64, 96\n  ],\n  fontWeights: {\n    body: 400,\n    heading: 700,\n    bold: 700,\n  },\n  lineHeights: {\n    body: 1.5,\n    heading: 1.25,\n  },\n  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],\n  sizes: {\n    avatar: 48,\n  },\n  radii: {\n    default: 4,\n    circle: 99999,\n  },\n  shadows: {\n    card: '0 0 4px rgba(0, 0, 0, .125)',\n  },\n  // rebass variants\n  text: {\n    heading: {\n      fontFamily: 'heading',\n      lineHeight: 'heading',\n      fontWeight: 'heading',\n    },\n    display: {\n      fontFamily: 'heading',\n      fontWeight: 'heading',\n      lineHeight: 'heading',\n      fontSize: [ 5, 6, 7 ],\n    },\n    caps: {\n      textTransform: 'uppercase',\n      letterSpacing: '0.1em',\n    },\n  },\n  variants: {\n    avatar: {\n      width: 'avatar',\n      height: 'avatar',\n      borderRadius: 'circle',\n    },\n    card: {\n      p: 2,\n      bg: 'background',\n      boxShadow: 'card',\n    },\n    link: {\n      color: 'primary',\n    },\n    nav: {\n      fontSize: 1,\n      fontWeight: 'bold',\n      display: 'inline-block',\n      p: 2,\n      color: 'inherit',\n      textDecoration: 'none',\n      ':hover,:focus,.active': {\n        color: 'primary',\n      }\n    },\n  },\n  buttons: {\n    primary: {\n      fontSize: 2,\n      fontWeight: 'bold',\n      color: 'background',\n      bg: 'primary',\n      borderRadius: 'default',\n    },\n    outline: {\n      variant: 'buttons.primary',\n      color: 'primary',\n      bg: 'transparent',\n      boxShadow: 'inset 0 0 2px',\n    },\n    secondary: {\n      variant: 'buttons.primary',\n      color: 'background',\n      bg: 'secondary',\n    },\n  },\n  styles: {\n    root: {\n      fontFamily: 'body',\n      fontWeight: 'body',\n      lineHeight: 'body',\n    },\n  },\n}\n\nexport default preset\n"
  },
  {
    "path": "packages/preset/test/__snapshots__/index.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot 1`] = `\nObject {\n  \"buttons\": Object {\n    \"outline\": Object {\n      \"bg\": \"transparent\",\n      \"boxShadow\": \"inset 0 0 2px\",\n      \"color\": \"primary\",\n      \"variant\": \"buttons.primary\",\n    },\n    \"primary\": Object {\n      \"bg\": \"primary\",\n      \"borderRadius\": \"default\",\n      \"color\": \"background\",\n      \"fontSize\": 2,\n      \"fontWeight\": \"bold\",\n    },\n    \"secondary\": Object {\n      \"bg\": \"secondary\",\n      \"color\": \"background\",\n      \"variant\": \"buttons.primary\",\n    },\n  },\n  \"colors\": Object {\n    \"background\": \"#fff\",\n    \"gray\": \"#dddddf\",\n    \"highlight\": \"hsla(205, 100%, 40%, 0.125)\",\n    \"muted\": \"#f6f6f9\",\n    \"primary\": \"#07c\",\n    \"secondary\": \"#30c\",\n    \"text\": \"#000\",\n  },\n  \"fontSizes\": Array [\n    12,\n    14,\n    16,\n    20,\n    24,\n    32,\n    48,\n    64,\n    96,\n  ],\n  \"fontWeights\": Object {\n    \"body\": 400,\n    \"bold\": 700,\n    \"heading\": 700,\n  },\n  \"fonts\": Object {\n    \"body\": \"system-ui, sans-serif\",\n    \"heading\": \"inherit\",\n    \"monospace\": \"Menlo, monospace\",\n  },\n  \"lineHeights\": Object {\n    \"body\": 1.5,\n    \"heading\": 1.25,\n  },\n  \"radii\": Object {\n    \"circle\": 99999,\n    \"default\": 4,\n  },\n  \"shadows\": Object {\n    \"card\": \"0 0 4px rgba(0, 0, 0, .125)\",\n  },\n  \"sizes\": Object {\n    \"avatar\": 48,\n  },\n  \"space\": Array [\n    0,\n    4,\n    8,\n    16,\n    32,\n    64,\n    128,\n    256,\n    512,\n  ],\n  \"styles\": Object {\n    \"root\": Object {\n      \"fontFamily\": \"body\",\n      \"fontWeight\": \"body\",\n      \"lineHeight\": \"body\",\n    },\n  },\n  \"text\": Object {\n    \"caps\": Object {\n      \"letterSpacing\": \"0.1em\",\n      \"textTransform\": \"uppercase\",\n    },\n    \"display\": Object {\n      \"fontFamily\": \"heading\",\n      \"fontSize\": Array [\n        5,\n        6,\n        7,\n      ],\n      \"fontWeight\": \"heading\",\n      \"lineHeight\": \"heading\",\n    },\n    \"heading\": Object {\n      \"fontFamily\": \"heading\",\n      \"fontWeight\": \"heading\",\n      \"lineHeight\": \"heading\",\n    },\n  },\n  \"variants\": Object {\n    \"avatar\": Object {\n      \"borderRadius\": \"circle\",\n      \"height\": \"avatar\",\n      \"width\": \"avatar\",\n    },\n    \"card\": Object {\n      \"bg\": \"background\",\n      \"boxShadow\": \"card\",\n      \"p\": 2,\n    },\n    \"link\": Object {\n      \"color\": \"primary\",\n    },\n    \"nav\": Object {\n      \":hover,:focus,.active\": Object {\n        \"color\": \"primary\",\n      },\n      \"color\": \"inherit\",\n      \"display\": \"inline-block\",\n      \"fontSize\": 1,\n      \"fontWeight\": \"bold\",\n      \"p\": 2,\n      \"textDecoration\": \"none\",\n    },\n  },\n}\n`;\n"
  },
  {
    "path": "packages/preset/test/index.js",
    "content": "import preset from '../src'\n\ntest('snapshot', () => {\n  expect(preset).toMatchSnapshot()\n})\n"
  },
  {
    "path": "packages/preset-material/LICENSE.md",
    "content": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n"
  },
  {
    "path": "packages/preset-material/README.md",
    "content": "\n# @rebass/preset-material\n\nMaterial Design theme preset for use with [Rebass][]\n\n```sh\nnpm i @rebass/preset-material\n```\n\n## Usage\n\nFor general usage with [Emotion][], pass the theme preset to Emotion's `ThemeProvider` component at the root of your application.\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport theme from '@rebass/preset-material'\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    {props.children}\n  </ThemeProvider>\n```\n\nFor use with [Theme UI][], import the `ThemeProvider` from `theme-ui`.\n\n```jsx\nimport { ThemeProvider } from 'theme-ui'\n```\n\nOr, if you're using `gatsby-plugin-theme-ui`, export the theme from `src/gatsby-plugin-theme-ui/index.js`.\n\n```js\n// src/gatsby-plugin-theme-ui/index.js\nimport preset from '@rebass/preset-material'\n\nexport default {\n  ...preset\n}\n```\n\n[MIT License](LICENSE.md)\n\n[rebass]: https://rebassjs.org\n[emotion]: https://emotion.sh\n[theme ui]: https://theme-ui.com\n"
  },
  {
    "path": "packages/preset-material/package.json",
    "content": "{\n  \"name\": \"@rebass/preset-material\",\n  \"version\": \"4.0.5\",\n  \"description\": \"Material Design theme preset for use with Rebass\",\n  \"main\": \"dist/index.js\",\n  \"scripts\": {\n    \"prepare\": \"babel src -d dist --root-mode upward\",\n    \"watch\": \"babel src -d dist --watch --root-mode upward\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"react-component\",\n    \"ui\",\n    \"design-system\",\n    \"styled-system\",\n    \"emotion\",\n    \"theming\",\n    \"material-design\",\n    \"theme-ui\"\n  ],\n  \"author\": \"Brent Jackson\",\n  \"repository\": \"rebassjs/rebass\",\n  \"license\": \"MIT\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/preset-material/src/index.js",
    "content": "// material theme preset\n// work-in-progress\n\n// references\n// - https://material.io/design/typography/the-type-system.html#type-scale\n\nexport const preset = {\n  googleFonts: 'https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,700&display=swap',\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#6200ee',\n    secondary: '#03dac6',\n    muted: '#f6f6f6',\n    gray: '#555',\n  },\n  fonts: {\n    body: 'Roboto, sans-serif',\n    heading: 'inherit',\n    monospace: '\"Roboto Mono\", monospace',\n  },\n  fontSizes: [\n    10, 12, 14, 16, 20, 24, 34, 48, 60, 96\n  ],\n  fontWeights: {\n    body: 400,\n    heading: 400,\n    bold: 700,\n  },\n  lineHeights: {\n    body: 1.5,\n    heading: 1.2,\n  },\n  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],\n  sizes: {\n    icon: 24,\n    avatar: 48,\n  },\n  radii: {\n    default: 4,\n    circle: 99999,\n  },\n  shadows: {\n    // source: https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d\n    1: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n    2: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',\n    3: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\n    4: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',\n    5: '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',\n  },\n  // rebass variants\n  text: {\n    heading: {\n      fontFamily: 'heading',\n      lineHeight: 'heading',\n      fontWeight: 'heading',\n    },\n    display: {\n      fontFamily: 'heading',\n      fontWeight: 'heading',\n      lineHeight: 'heading',\n      fontSize: [ 6, 7 ],\n    },\n    caps: {\n      textTransform: 'uppercase',\n      letterSpacing: '0.1em',\n    },\n  },\n  variants: {\n    avatar: {\n      width: 'avatar',\n      height: 'avatar',\n      borderRadius: 'circle',\n    },\n    card: {\n      p: 2,\n      bg: 'background',\n      boxShadow: 2,\n    },\n    link: {\n      color: 'primary',\n    },\n    nav: {\n      variant: 'text.caps',\n      fontSize: 1,\n      fontWeight: 'bold',\n      display: 'inline-block',\n      p: 2,\n      color: 'inherit',\n      textDecoration: 'none',\n      ':hover,:focus,.active': {\n        color: 'primary',\n      }\n    },\n  },\n  buttons: {\n    primary: {\n      variant: 'text.caps',\n      fontSize: 2,\n      fontWeight: 'body',\n      color: 'background',\n      bg: 'primary',\n      borderRadius: 'default',\n    },\n    outline: {\n      variant: 'buttons.primary',\n      color: 'primary',\n      bg: 'transparent',\n      boxShadow: 'inset 0 0 2px',\n    },\n    secondary: {\n      variant: 'buttons.primary',\n      color: 'background',\n      bg: 'secondary',\n    },\n  },\n  styles: {\n    root: {\n      fontFamily: 'body',\n      fontWeight: 'body',\n      lineHeight: 'body',\n    },\n  },\n}\n\nexport default preset\n"
  },
  {
    "path": "packages/preset-material/test/__snapshots__/index.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`snapshot 1`] = `\nObject {\n  \"buttons\": Object {\n    \"outline\": Object {\n      \"bg\": \"transparent\",\n      \"boxShadow\": \"inset 0 0 2px\",\n      \"color\": \"primary\",\n      \"variant\": \"buttons.primary\",\n    },\n    \"primary\": Object {\n      \"bg\": \"primary\",\n      \"borderRadius\": \"default\",\n      \"color\": \"background\",\n      \"fontSize\": 2,\n      \"fontWeight\": \"body\",\n      \"variant\": \"text.caps\",\n    },\n    \"secondary\": Object {\n      \"bg\": \"secondary\",\n      \"color\": \"background\",\n      \"variant\": \"buttons.primary\",\n    },\n  },\n  \"colors\": Object {\n    \"background\": \"#fff\",\n    \"gray\": \"#555\",\n    \"muted\": \"#f6f6f6\",\n    \"primary\": \"#6200ee\",\n    \"secondary\": \"#03dac6\",\n    \"text\": \"#000\",\n  },\n  \"fontSizes\": Array [\n    10,\n    12,\n    14,\n    16,\n    20,\n    24,\n    34,\n    48,\n    60,\n    96,\n  ],\n  \"fontWeights\": Object {\n    \"body\": 400,\n    \"bold\": 700,\n    \"heading\": 400,\n  },\n  \"fonts\": Object {\n    \"body\": \"Roboto, sans-serif\",\n    \"heading\": \"inherit\",\n    \"monospace\": \"\\\\\"Roboto Mono\\\\\", monospace\",\n  },\n  \"googleFonts\": \"https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,700&display=swap\",\n  \"lineHeights\": Object {\n    \"body\": 1.5,\n    \"heading\": 1.2,\n  },\n  \"radii\": Object {\n    \"circle\": 99999,\n    \"default\": 4,\n  },\n  \"shadows\": Object {\n    \"1\": \"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)\",\n    \"2\": \"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)\",\n    \"3\": \"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)\",\n    \"4\": \"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)\",\n    \"5\": \"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)\",\n  },\n  \"sizes\": Object {\n    \"avatar\": 48,\n    \"icon\": 24,\n  },\n  \"space\": Array [\n    0,\n    4,\n    8,\n    16,\n    32,\n    64,\n    128,\n    256,\n    512,\n  ],\n  \"styles\": Object {\n    \"root\": Object {\n      \"fontFamily\": \"body\",\n      \"fontWeight\": \"body\",\n      \"lineHeight\": \"body\",\n    },\n  },\n  \"text\": Object {\n    \"caps\": Object {\n      \"letterSpacing\": \"0.1em\",\n      \"textTransform\": \"uppercase\",\n    },\n    \"display\": Object {\n      \"fontFamily\": \"heading\",\n      \"fontSize\": Array [\n        6,\n        7,\n      ],\n      \"fontWeight\": \"heading\",\n      \"lineHeight\": \"heading\",\n    },\n    \"heading\": Object {\n      \"fontFamily\": \"heading\",\n      \"fontWeight\": \"heading\",\n      \"lineHeight\": \"heading\",\n    },\n  },\n  \"variants\": Object {\n    \"avatar\": Object {\n      \"borderRadius\": \"circle\",\n      \"height\": \"avatar\",\n      \"width\": \"avatar\",\n    },\n    \"card\": Object {\n      \"bg\": \"background\",\n      \"boxShadow\": 2,\n      \"p\": 2,\n    },\n    \"link\": Object {\n      \"color\": \"primary\",\n    },\n    \"nav\": Object {\n      \":hover,:focus,.active\": Object {\n        \"color\": \"primary\",\n      },\n      \"color\": \"inherit\",\n      \"display\": \"inline-block\",\n      \"fontSize\": 1,\n      \"fontWeight\": \"bold\",\n      \"p\": 2,\n      \"textDecoration\": \"none\",\n      \"variant\": \"text.caps\",\n    },\n  },\n}\n`;\n"
  },
  {
    "path": "packages/preset-material/test/index.js",
    "content": "import preset from '../src'\n\ntest('snapshot', () => {\n  expect(preset).toMatchSnapshot()\n})\n"
  },
  {
    "path": "packages/rebass/.gitignore",
    "content": "styled-components\ndist\n"
  },
  {
    "path": "packages/rebass/.npmignore",
    "content": "test\n"
  },
  {
    "path": "packages/rebass/README.md",
    "content": "\n<img src='https://rebassjs.org/logo.svg' width='128' height='128' />\n\n# Rebass\n\nReact primitive UI components built with [Styled System][].\nhttps://rebassjs.org\n\n[![Build Status][badge]][travis]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][npm]\n[![Version][version-badge]][npm]\n[![MIT License][license-badge]](LICENSE.md)\n\n[badge]: https://flat.badgen.net/travis/rebassjs/rebass/master\n[travis]: https://travis-ci.org/rebassjs/rebass\n[coverage-badge]: https://flat.badgen.net/codecov/c/github/rebassjs/rebass\n[coverage]: https://codecov.io/github/rebassjs/rebass\n\n[downloads-badge]: https://flat.badgen.net/npm/dw/rebass\n[version-badge]: https://flat.badgen.net/npm/v/rebass\n[license-badge]: https://flat.badgen.net/badge/license/MIT/blue\n[npm]: https://npmjs.com/package/rebass\n\n```sh\nnpm i rebass\n```\n\n## Getting Started\n\n```jsx\nimport React from 'react'\nimport { Box, Heading, Button } from 'rebass'\n\nexport default props =>\n  <Box>\n    <Heading>Hello</Heading>\n    <Button>Rebass</Button>\n  </Box>\n```\n## Features\n\n- Start your design system without boiling the ocean\n- Build consistent UI with design constraints and user-defined scales\n- Best-in-class developer ergonomics with [Styled System][] props\n- First-class support for theming &\n  fully compatible with [Theme UI][]\n- Quick, mobile-first responsive styles with array-based syntax\n- Flexbox layout with the Box and Flex components\n- Flexibility built in for high design & development velocity\n- Minimal footprint at about 4KB\n\n\n[reflexbox]: https://rebassjs.org/reflexbox\n\n> \"One of the best React component libs out there\"\n>\n> – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)\n\n> \"Rebass is the Bootstrap of React.\"\n>\n> – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)\n\n> \"A whopper component library built on styled-components. Responsive, systematic, scalable...the business!\"\n>\n> – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)\n\n## Principles\n\nRebass is intended to be:\n\n- **Minimal**\n- **Useful**\n- **Unopinionated**\n- **Flexible**\n- **Consistent**\n- **Extensible**\n- **Themeable**\n\n> Do one thing, and do it well\n>\n> – [Unix philosophy](https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well)\n\nSee [Patterns for Style Composition in React](http://jxnblk.com/writing/patterns-for-style-composition-in-react/)\nfor more on some of the thought behind Rebass.\n\n## Documentation\n\n- [Docs](https://rebassjs.org)\n- [Getting Started](https://rebassjs.org/getting-started)\n- [Props](https://rebassjs.org/props)\n- [Extending](https://rebassjs.org/extending)\n- [Theming](https://rebassjs.org/theming)\n- [Reflexbox](https://rebassjs.org/reflexbox)\n- [Text](https://rebassjs.org/Text)\n- [Heading](https://rebassjs.org/Heading)\n- [Button](https://rebassjs.org/Button)\n- [Link](https://rebassjs.org/Link)\n- [Image](https://rebassjs.org/Image)\n- [Card](https://rebassjs.org/Card)\n\n## CodeSandbox\n\nTry it out:\nhttps://codesandbox.io/s/github/rebassjs/rebass/tree/master/examples/sandbox\n\n\n### Related\n\n- [Styled System][]\n- [Theme UI][]\n- [Emotion][]\n- [Styled Components][]\n\n[styled system]: https://styled-system.com\n[styled components]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n[theme ui]: https://theme-ui.com\n\n### Upgrading from v3\n\nSee the [Migration Guide](https://rebassjs.org/migrating/).\n\n#### Previous Versions\n\n- [v3.2.2](https://github.com/rebassjs/rebass/tree/v3.2.2) – [v3 Docs](https://rebass-v3.now.sh)\n- [v2.3.2](https://github.com/rebassjs/rebass/tree/v2) – [Docs for Rebass v2](https://rebass-v2.now.sh)\n- [v1.0.7](https://github.com/rebassjs/rebass/tree/v1.0.7)\n\n---\n\n[Contributing](CONTRIBUTING.md) | [MIT License](LICENSE.md)\n\n"
  },
  {
    "path": "packages/rebass/package.json",
    "content": "{\n  \"name\": \"rebass\",\n  \"version\": \"4.0.7\",\n  \"description\": \"React primitive UI components built with Styled System\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.esm.js\",\n  \"scripts\": {\n    \"prepare\": \"rebass-bundler\"\n  },\n  \"keywords\": [\n    \"components\",\n    \"react\",\n    \"react-component\",\n    \"ui\",\n    \"design-system\",\n    \"styled-system\",\n    \"styled-components\",\n    \"emotion\",\n    \"theming\",\n    \"presentational\",\n    \"stateless\",\n    \"functional\"\n  ],\n  \"author\": \"Brent Jackson\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"reflexbox\": \"^4.0.6\"\n  },\n  \"repository\": \"rebassjs/rebass\",\n  \"bugs\": {\n    \"url\": \"https://github.com/rebassjs/rebass/issues\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/rebass/src/index.js",
    "content": "import React, { forwardRef } from 'react'\nimport { Box, Flex } from 'reflexbox'\n\nexport { Box, Flex }\n\nexport const Text = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    tx='text'\n    {...props}\n  />\n)\n\nexport const Heading = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='h2'\n    tx='text'\n    variant='heading'\n    {...props}\n    __css={{\n      fontSize: 4,\n      fontFamily: 'heading',\n      fontWeight: 'heading',\n      lineHeight: 'heading',\n    }}\n  />\n)\n\nexport const Link = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='a'\n    variant='link'\n    {...props}\n  />\n)\n\nexport const Button = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='button'\n    tx='buttons'\n    variant='primary'\n    {...props}\n    __css={{\n      appearance: 'none',\n      display: 'inline-block',\n      textAlign: 'center',\n      lineHeight: 'inherit',\n      textDecoration: 'none',\n      fontSize: 'inherit',\n      px: 3,\n      py: 2,\n      color: 'white',\n      bg: 'primary',\n      border: 0,\n      borderRadius: 4,\n    }}\n  />\n)\n\nexport const Image = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    as='img'\n    {...props}\n    __css={{\n      maxWidth: '100%',\n      height: 'auto',\n    }}\n  />\n)\n\nexport const Card = forwardRef((props, ref) =>\n  <Box\n    ref={ref}\n    variant='card'\n    {...props}\n  />\n)\n"
  },
  {
    "path": "packages/rebass/test/index.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { matchers } from 'jest-emotion'\nimport {\n  Text,\n  Heading,\n  Button,\n  Link,\n  Image,\n  Card,\n} from '../src'\n\nexpect.extend(matchers)\n\nconst render = el => renderer.create(el).toJSON()\n\ndescribe('Text', () => {\n  test('renders', () => {\n    const json = render(\n      <Text textAlign='center' fontWeight='bold' fontStyle='italic' />\n    )\n    expect(json.type).toBe('div')\n    expect(json).toHaveStyleRule('text-align', 'center')\n    expect(json).toHaveStyleRule('font-weight', 'bold')\n    expect(json).toHaveStyleRule('font-style', 'italic')\n  })\n\n  test('renders with text variants', () => {\n    const json = render(\n      <Text\n        theme={{\n          text: {\n            caps: {\n              textTransform: 'uppercase',\n              letterSpacing: '0.2em',\n            }\n          }\n        }}\n        variant='caps'\n      />\n    )\n    expect(json).toHaveStyleRule('text-transform', 'uppercase')\n    expect(json).toHaveStyleRule('letter-spacing', '0.2em')\n  })\n})\n\ndescribe('Heading', () => {\n  test('renders', () => {\n    const json = render(\n      <Heading />\n    )\n    expect(json.type).toBe('h2')\n    expect(json).toHaveStyleRule('font-size', '24px')\n    expect(json).toHaveStyleRule('font-weight', 'heading')\n  })\n\n  test('renders with text variants', () => {\n    const json = render(\n      <Heading\n        theme={{\n          text: {\n            display: {\n              fontSize: 64,\n              fontWeight: 900,\n            }\n          }\n        }}\n        variant='display'\n      />\n    )\n    expect(json).toHaveStyleRule('font-size', '64px')\n    expect(json).toHaveStyleRule('font-weight', '900')\n  })\n})\n\ndescribe('Button', () => {\n  test('renders', () => {\n    const json = render(\n      <Button />\n    )\n    expect(json.type).toBe('button')\n    expect(json).toHaveStyleRule('color', 'white')\n    expect(json).toHaveStyleRule('background-color', 'primary')\n  })\n\n  test('renders as <a>', () => {\n    const json = render(\n      <Button as='a' />\n    )\n    expect(json.type).toBe('a')\n  })\n})\n\ndescribe('Link', () => {\n  test('renders', () => {\n    const json = render(\n      <Link />\n    )\n    expect(json.type).toBe('a')\n  })\n\n  test('renders with theme', () => {\n    const json = render(\n      <Link\n        theme={{\n          variants: {\n            link: {\n              color: 'primary',\n            }\n          }\n        }}\n      />\n    )\n    expect(json).toHaveStyleRule('color', 'primary')\n  })\n})\n\ndescribe('Image', () => {\n  test('renders', () => {\n    const json = render(\n      <Image />\n    )\n    expect(json.type).toBe('img')\n    expect(json).toHaveStyleRule('max-width', '100%')\n  })\n})\n\ndescribe('Card', () => {\n  test('renders', () => {\n    const json = render(\n      <Card\n        p={3}\n        bg='tomato'\n        sx={{\n          borderRadius: 8,\n          boxShadow: '0 0 48px tomato',\n        }}\n      />\n    )\n    expect(json.type).toBe('div')\n    expect(json).toHaveStyleRule('padding', '16px')\n    expect(json).toHaveStyleRule('background-color', 'tomato')\n    expect(json).toHaveStyleRule('border-radius', '8px')\n    expect(json).toHaveStyleRule('box-shadow', '0 0 48px tomato')\n  })\n\n  test('renders with default variant', () => {\n    const json = render(\n      <Card\n        theme={{\n          variants: {\n            card: {\n              p: 3,\n              bg: 'tomato',\n              borderRadius: 4,\n            }\n          }\n        }}\n      />\n    )\n    expect(json).toHaveStyleRule('padding', '16px')\n    expect(json).toHaveStyleRule('background-color', 'tomato')\n    expect(json).toHaveStyleRule('border-radius', '4px')\n  })\n})\n"
  },
  {
    "path": "packages/reflexbox/.gitignore",
    "content": "dist\nstyled-components\n"
  },
  {
    "path": "packages/reflexbox/.npmignore",
    "content": "test\nbabel.config.js\n"
  },
  {
    "path": "packages/reflexbox/LICENSE.md",
    "content": "# The MIT License (MIT)\nCopyright (c) 2015 – 2019 Brent Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n"
  },
  {
    "path": "packages/reflexbox/README.md",
    "content": "\n# Reflexbox\n\n📦 Ergonomic, responsive React layout and grid system.\nThe original *Box* component™ since 2015\n\n[![Build Status][badge]][travis]\n[![Downloads][downloads-badge]][npm]\n[![Version][version-badge]][npm]\n[![MIT License][license-badge]](LICENSE.md)\n[![system-ui/theme](https://flat.badgen.net/badge/system-ui/theme/black)](https://system-ui.com/theme)\n\n[badge]: https://flat.badgen.net/travis/rebassjs/rebass/master\n[travis]: https://travis-ci.org/rebassjs/rebass\n[downloads-badge]: https://flat.badgen.net/npm/dw/reflexbox\n[version-badge]: https://flat.badgen.net/npm/v/reflexbox\n[license-badge]: https://flat.badgen.net/badge/license/MIT/blue\n[npm]: https://npmjs.com/package/reflexbox\n\n- Primitive styled components for all your layout needs\n- Customize styles inline with the `sx` prop\n- Ergonomic responsive array-based values\n- Support for component variants\n- [Styled System][] props\n- Themeable and compatible with the [Theme Specification][]\n- Built with [Styled System][]\n- Works with [Theme UI][]\n- Built with Emotion, with support for Styled Components\n\n## Getting Started\n\n```sh\nnpm i reflexbox\n```\n\n```jsx\nimport React from 'react'\nimport { Flex, Box } from 'reflexbox'\n\nexport default props =>\n  <Flex flexWrap='wrap'>\n    <Box\n      width={[ 1, 1/2 ]}\n      p={3}>\n      Reflex\n    </Box>\n    <Box\n      width={[ 1, 1/2 ]}\n      p={3}>\n      Box\n    </Box>\n  </Flex>\n```\n\n### `sx` Prop\n\nThe `Box` and `Flex` components both accept a `sx` prop that works with no additional setup required.\nThe `sx` prop is similar to Emotion's `css` prop, but allows you to use values derived from the theme object.\n\nReflexbox follows the [Theme Specification][], which means that any theme created for use with [Theme UI][], [Styled System][], or other similar libraries will work out-of-the-box.\nThis allows you to share design constraints for typography, color, and layout throughout your application using a theming context.\n\n```jsx\n<Box\n  sx={{\n    p: 4,\n    color: 'primary',\n  }}\n/>\n```\n\nNote: to opt-out of theme-based styles, use the `css` prop instead, which will not transform values.\n\n## Theming\n\nBecause Reflexbox follows the [Theme Specification][], all themes built for use with [Styled System][], [Theme UI][], or other related libraries are compatible with Reflexbox.\n\nTo add a theme to an application, import the `ThemeProvider` component from `emotion-theming` and pass a custom theme object in.\n\n```sh\nnpm i emotion-theming\n```\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from 'emotion-theming'\nimport { Flex, Box } from 'reflexbox'\n\nconst theme = {\n  breakpoints: [\n    '40em', '52em', '64em',\n  ],\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#07c',\n  },\n  space: [\n    0, 4, 8, 16, 32, 64, 128, 256,\n  ],\n}\n\nexport default props =>\n  <ThemeProvider theme={theme}>\n    <Box\n      sx={{\n        p: 4,\n        bg: 'primary',\n      }}>\n      Hello\n    </Box>\n  </ThemeProvider>\n```\n\nFor use with [Theme UI][], use `gatsby-plugin-theme-ui` or import the Theme UI `ThemeProvider` instead.\n\n```js\nimport { ThemeProvider } from 'theme-ui'\n```\n\n## Variants\n\nReflexbox components also accept a `variant` prop, which allows you to define commonly used styles,\nsuch as cards, badges, and CSS grid layouts, in your theme object for reuse.\n\nAdd a `variants` object to your theme and include any variants as style objects. These styles can reference other values in your theme such as colors, typographic styles, and more.\n\n```js\n// example theme\nexport default {\n  colors: {\n    text: '#000',\n    background: '#fff',\n    primary: '#07c',\n  },\n  radii: {\n    default: 4,\n  },\n  shadows: {\n    card: '0 0 4px rgba(0, 0, 0, .125)',\n  },\n  variants: {\n    card: {\n      p: 3,\n      borderRadius: 'default',\n      bg: 'white',\n      boxShadow: 'card',\n    },\n    badge: {\n      color: 'white',\n      bg: 'primary',\n      p: 1,\n      borderRadius: 'default',\n    },\n  },\n}\n```\n\nTo apply a variant to your component, pass the name to the `variant` prop.\n\n```jsx\n<Box variant='card'>Card</Box>\n<Box variant='badge'>Badge</Box>\n```\n\n## Responsive Styles\n\nUse array values to quickly and ergonomically add mobile-first responsive styles to specific properties.\nThis works on all style props and the `sx` prop.\nSee the [Styled System][] docs for more.\n\n```jsx\n// 100% width at the smallest viewport width\n// 50% width at the next breakpoint\n// 25% width at the next breakpoint\n<Box width={[ '100%', '50%', '25%' ]} />\n```\n\nYou can customize the widths used for each breakpoint by defining a `theme.breakpoints` array in your theme.\n\n## Styled System Props\n\nReflexbox conforms to the [Theme Specification][] and includes many common [Styled System][] props.\nThe `Box` and `Flex` components accept the following props:\n\n### Space Props\n\nProp | Theme Key\n---|---\n`margin`, `m`         | `space`\n`marginTop`, `mt`     | `space`\n`marginRight`, `mr`   | `space`\n`marginBottom`, `mb`  | `space`\n`marginLeft`, `ml`  | `space`\n`marginX`, `mx`  | `space`\n`marginY`, `my`  | `space`\n`padding`, `p`         | `space`\n`paddingTop`, `pt`     | `space`\n`paddingRight`, `pr`   | `space`\n`paddingBottom`, `pb`  | `space`\n`paddingLeft`, `pl`    | `space`\n`paddingX`, `px`  | `space`\n`paddingY`, `py`  | `space`\n\n### Layout Props\n\nProp | Theme Key\n---|---\n`width` | `sizes`\n`height` | `sizes`\n`minWidth` | `sizes`\n`maxWidth` | `sizes`\n`minHeight` | `sizes`\n`maxHeight` | `sizes`\n\n### Typography Props\n\nProp | Theme Key\n---|---\n`fontFamily` | `fonts`\n`fontSize` | `fontSizes`\n`fontWeight` | `fontWeights`\n`lineHeight` | `lineHeights`\n`letterSpacing` | `letterSpacings`\n`fontStyle` | N/A\n`textAlign` | N/A\n\n### Color Props\n\nProp | Theme Key\n---|---\n`color` | `colors`\n`backgroundColor`, `bg` | `colors`\n`opacity` | N/A\n\n### Flexbox Props\n\nProp | Theme Key\n---|---\n`alignItems` | N/A\n`alignContent` | N/A\n`justifyItems` | N/A\n`justifyContent` | N/A\n`flexWrap` | N/A\n`flexDirection` | N/A\n`flex` | N/A\n`flexGrow` | N/A\n`flexShrink` | N/A\n`flexBasis` | N/A\n`justifySelf` | N/A\n`alignSelf` | N/A\n`order` | N/A\n\n## Styled Components\n\nTo use Reflexbox with Styled Components, import components from `reflexbox/styled-components`.\n\n```js\nimport { Flex, Box } from 'reflexbox/styled-components'\n```\n\n## About\n\nThis library is the result of consolidating APIs and ergonomics from the original Reflexbox library, Grid Styled, and Rebass Grid.\nReflexbox originally appeared with the original version of Rebass in 2015.\n\n[MIT License](LICENSE.md)\n\n[theme specification]: https://github.com/system-ui/theme-specification\n[styled system]: https://styled-system.com\n[theme ui]: https://theme-ui.com\n[emotion]: https://emotion.sh\n[styled components]: https://styled-components.com\n\n"
  },
  {
    "path": "packages/reflexbox/babel.config.js",
    "content": "module.exports = {\n  presets: [ '@babel/preset-env' ],\n  env: {\n    styled: {\n      plugins: [\n        [\n          'transform-rename-import', {\n            original: '@emotion/styled',\n            replacement: 'styled-components',\n          }\n        ]\n      ]\n    }\n  }\n}\n"
  },
  {
    "path": "packages/reflexbox/package.json",
    "content": "{\n  \"name\": \"reflexbox\",\n  \"version\": \"4.0.6\",\n  \"description\": \"Responsive React grid system built with Styled System, with support for Emotion and Styled Components\",\n  \"main\": \"dist/index.js\",\n  \"keywords\": [\n    \"reflexbox\",\n    \"flexbox\",\n    \"grid-styled\",\n    \"rebass\",\n    \"rebass-grid\",\n    \"layout\",\n    \"emotion\",\n    \"css\",\n    \"style\"\n  ],\n  \"scripts\": {\n    \"prepare\": \"babel src -d dist && yarn styled-components\",\n    \"styled-components\": \"NODE_ENV=styled babel src -d styled-components\"\n  },\n  \"dependencies\": {\n    \"@emotion/core\": \"^10.0.0\",\n    \"@emotion/styled\": \"^10.0.0\",\n    \"@styled-system/css\": \"^5.0.0\",\n    \"@styled-system/should-forward-prop\": \"^5.0.0\",\n    \"styled-system\": \"^5.0.0\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^16.8.6\"\n  },\n  \"author\": \"Brent Jackson\",\n  \"license\": \"MIT\",\n  \"repository\": \"rebassjs/rebass\",\n  \"devDependencies\": {\n    \"babel-plugin-transform-rename-import\": \"^2.3.0\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/reflexbox/src/index.js",
    "content": "import React from 'react'\nimport styled from '@emotion/styled'\nimport {\n  compose,\n  space,\n  layout,\n  typography,\n  color,\n  flexbox,\n} from 'styled-system'\nimport css, { get } from '@styled-system/css'\nimport shouldForwardProp from '@styled-system/should-forward-prop'\n\nconst sx = props => css(props.sx)(props.theme)\nconst base = props => css(props.__css)(props.theme)\nconst variant = ({\n  theme,\n  variant,\n  tx = 'variants',\n}) =>\n  css(\n    get(theme, tx + '.' + variant,\n      get(theme, variant)\n    )\n  )(theme)\n\nexport const Box = styled('div', {\n  shouldForwardProp\n})({\n  boxSizing: 'border-box',\n  margin: 0,\n  minWidth: 0,\n},\n  base,\n  variant,\n  sx,\n  props => props.css,\n  compose(\n    space,\n    layout,\n    typography,\n    color,\n    flexbox,\n  ),\n)\n\nexport const Flex = styled(Box)({\n  display: 'flex'\n})\n"
  },
  {
    "path": "packages/reflexbox/test/index.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { matchers } from 'jest-emotion'\nimport {\n  Box,\n  Flex,\n} from '../src'\n\nexpect.extend(matchers)\n\nconst render = el => renderer.create(el).toJSON()\n\ndescribe('Box', () => {\n  test('renders', () => {\n    const json = render(\n      <Box />\n    )\n    expect(json.type).toBe('div')\n  })\n\n  test('renders with as prop', () => {\n    const json = render(\n      <Box as='header' />\n    )\n    expect(json.type).toBe('header')\n  })\n\n  test('renders with style props', () => {\n    const json = render(\n      <Box width={1} />\n    )\n    expect(json).toHaveStyleRule('width', '100%')\n  })\n\n  test('renders with layout props', () => {\n    const json = render(\n      <Box\n        display='inline-block'\n        height={256}\n        maxWidth={768}\n      />\n    )\n    expect(json).toHaveStyleRule('display', 'inline-block')\n    expect(json).toHaveStyleRule('height', '256px')\n    expect(json).toHaveStyleRule('max-width', '768px')\n  })\n\n  test('renders with color props', () => {\n    const json = render(\n      <Box\n        color='tomato'\n        bg='black'\n      />\n    )\n    expect(json).toHaveStyleRule('color', 'tomato')\n    expect(json).toHaveStyleRule('background-color', 'black')\n  })\n\n  test('renders with typography props', () => {\n    const json = render(\n      <Box\n        fontSize={3}\n        lineHeight={1.5}\n        fontWeight='bold'\n        letterSpacing='0.2em'\n      />\n    )\n    expect(json).toHaveStyleRule('font-size', '20px')\n    expect(json).toHaveStyleRule('line-height', '1.5')\n    expect(json).toHaveStyleRule('font-weight', 'bold')\n    expect(json).toHaveStyleRule('letter-spacing', '0.2em')\n  })\n\n  test('renders with flexbox props', () => {\n    const json = render(\n      <Box\n        flex='1 1 auto'\n        alignSelf='flex-start'\n      />\n    )\n    expect(json).toHaveStyleRule('flex', '1 1 auto')\n    expect(json).toHaveStyleRule('align-self', 'flex-start')\n  })\n\n  test('renders with box-sizing', () => {\n    const json = render(\n      <Box />\n    )\n    expect(json).toHaveStyleRule('box-sizing', 'border-box')\n  })\n\n  test('renders with sx prop', () => {\n    const json = render(\n      <Box\n        sx={{\n          borderRadius: 2,\n          border: '1px solid cyan',\n        }}\n      />\n    )\n    expect(json).toHaveStyleRule('border-radius', '2px')\n    expect(json).toHaveStyleRule('border', '1px solid cyan')\n  })\n\n  test('renders with css prop', () => {\n    const json = render(\n      <Box\n        css={{\n          margin: 4,\n          padding: 16,\n          color: 'tomato',\n        }}\n      />\n    )\n    expect(json).toHaveStyleRule('margin', '4px')\n    expect(json).toHaveStyleRule('padding', '16px')\n    expect(json).toHaveStyleRule('color', 'tomato')\n  })\n\n  test('removes style props', () => {\n    const json = render(\n      <Box\n        color='blue'\n        fontSize={2}\n        width={1}\n      />\n    )\n    expect(Object.keys(json.props)).toEqual([\n      'className'\n    ])\n  })\n\n  test('renders with variants', () => {\n    const json = render(\n      <Box\n        theme={{\n          variants: {\n            card: {\n              p: 4,\n              border: '1px solid tomato',\n              borderRadius: 2,\n            }\n          }\n        }}\n        variant='card'\n      />\n    )\n    expect(json).toHaveStyleRule('padding', '32px')\n    expect(json).toHaveStyleRule('border', '1px solid tomato')\n    expect(json).toHaveStyleRule('border-radius', '2px')\n  })\n\n  test('renders with keyed variants', () => {\n    const json = render(\n      <Box\n        theme={{\n          buttons: {\n            primary: {\n              color: 'white',\n              bg: 'tomato',\n            }\n          }\n        }}\n        tx='buttons'\n        variant='primary'\n      />\n    )\n    expect(json).toHaveStyleRule('color', 'white')\n    expect(json).toHaveStyleRule('background-color', 'tomato')\n  })\n\n})\n\ndescribe('Flex', () => {\n  test('renders with display flex', () => {\n    const json = render(\n      <Flex />\n    )\n    expect(json).toHaveStyleRule('display', 'flex')\n  })\n\n  test('renders with Box props', () => {\n    const json = render(\n      <Flex color='tomato' />\n    )\n    expect(json).toHaveStyleRule('color', 'tomato')\n  })\n\n  test('as prop does not break Box props', () => {\n    const json = render(\n      <Flex\n        as='footer'\n        width={1/2}\n        fontSize={3}\n        color='tomato'\n      />\n    )\n    expect(json.type).toBe('footer')\n    expect(json).toHaveStyleRule('width', '50%')\n    expect(json).toHaveStyleRule('font-size', '20px')\n    expect(json).toHaveStyleRule('color', 'tomato')\n  })\n})\n"
  },
  {
    "path": "packages/space/README.md",
    "content": "\n# @rebass/space\n\nReact component for applying responsive margin and padding to child elements without a wrapping HTML container.\nBuilt with [Styled System][].\n\n```sh\nnpm i @rebass/space\n```\n\n```js\nimport React from 'react'\nimport Space from '@rebass/space'\n\n// Apply margin to child components without a wrapping <div>\nconst App = props => (\n  <Space mx={3} my={[ 2, 3 ]}>\n    <h1>Hello</h1>\n    <h2>Hi</h2>\n    <button>Beep</button>\n  </Space>\n)\n```\n\n## Props\n\nThe Space component uses [Styled System's][styled system] `space` utility to add margin and padding props.\n\nProp | Description | Type\n---|---|---\n`m` | margin | number, string, or array\n`mt` | margin-top | number, string, or array\n`mr` | margin-right | number, string, or array\n`mb` | margin-bottom | number, string, or array\n`ml` | margin-left | number, string, or array\n`mx` | margin x-axis (left and right) | number, string, or array\n`my` | margin y-axis (top and bottom) | number, string, or array\n`p` | padding | number, string, or array\n`pt` | padding-top | number, string, or array\n`pr` | padding-right | number, string, or array\n`pb` | padding-bottom | number, string, or array\n`pl` | padding-left | number, string, or array\n`px` | padding x-axis (left and right) | number, string, or array\n`py` | padding y-axis (top and bottom) | number, string, or array\n\nMIT License\n\n[styled system]: https://styled-system.com\n"
  },
  {
    "path": "packages/space/package.json",
    "content": "{\n  \"name\": \"@rebass/space\",\n  \"version\": \"4.0.5\",\n  \"description\": \"React component for applying responsive margin and padding to child elements without a wrapping HTML container. Built with Styled System.\",\n  \"main\": \"dist/index.js\",\n  \"scripts\": {\n    \"prepare\": \"babel src -d dist --root-mode upward\"\n  },\n  \"keywords\": [\n    \"rebass\",\n    \"styled-system\",\n    \"style\",\n    \"css\",\n    \"layout\",\n    \"margin\",\n    \"padding\"\n  ],\n  \"author\": \"Brent Jackson\",\n  \"license\": \"MIT\",\n  \"repository\": \"rebassjs/rebass\",\n  \"dependencies\": {\n    \"@emotion/core\": \"^10.0.0\",\n    \"@emotion/styled\": \"^10.0.0\",\n    \"styled-system\": \">=5.0.0\"\n  },\n  \"gitHead\": \"f0f01843e9fb63ca69112d7e97a1451b27ee9e6c\"\n}\n"
  },
  {
    "path": "packages/space/src/index.js",
    "content": "import React from 'react'\nimport styled from '@emotion/styled'\nimport { space } from 'styled-system'\n\nconst classnames = (...args) => args.join(' ')\nconst getClassName = el => (el.props && el.props.className) || ''\n\nexport const StyledChildren = ({\n  className,\n  children,\n  ...props\n}) => {\n  const styledChildren = React.Children.toArray(children)\n    .map(child => React.cloneElement(child, {\n      className: classnames(getClassName(child), className)\n    }))\n  return (\n    <>\n      {styledChildren}\n    </>\n  )\n}\n\nconst Space = styled(StyledChildren)(space)\n\nexport default Space\n"
  },
  {
    "path": "packages/space/test/__snapshots__/index.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders 1`] = `null`;\n\nexports[`renders children 1`] = `\nArray [\n  <div\n    className=\" css-0\"\n  >\n    Hello\n  </div>,\n  <h2\n    className=\" css-0\"\n  >\n    hi\n  </h2>,\n]\n`;\n"
  },
  {
    "path": "packages/space/test/index.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport Space from '../src'\n\nconst render = el => renderer.create(el).toJSON()\n\ntest('renders', () => {\n  const json = render(<Space />)\n  expect(json).toMatchSnapshot()\n})\n\ntest('renders children', () => {\n  const json = render(\n    <Space>\n      <div>Hello</div>\n      <h2>hi</h2>\n    </Space>\n  )\n  expect(json).toMatchSnapshot()\n})\n\ntest('adds classNames to children', () => {\n  const json = render(\n    <Space mx={2}>\n      <div>Hello</div>\n      <h2>hi</h2>\n    </Space>\n  )\n  const { className } = json[0].props\n  expect(json[0].props.className.length).toBeGreaterThan(0)\n  expect(json[1].props.className).toBe(className)\n})\n\ntest('merges with existing child classNames', () => {\n  const json = render(\n    <Space mx={2}>\n      <div className='beep'>Hello</div>\n      <h2>hi</h2>\n    </Space>\n  )\n  const { className } = json[0].props\n  expect(className).toMatch(/^beep\\s/)\n})\n"
  }
]