[
  {
    "path": ".babelrc",
    "content": "{\n  \"presets\": [\"@babel/env\", \"@babel/preset-react\"]\n}\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\nnpm-debug.log\ncoverage\ndist\n.site\n.DS_Store\n"
  },
  {
    "path": ".npmignore",
    "content": "src\nstorybook\ndocs\ntest\n"
  },
  {
    "path": ".storybook/.babelrc",
    "content": "{ \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"] }\n"
  },
  {
    "path": ".storybook/AAA.js",
    "content": "import React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Box, Flex, Heading, Text, Link, Button, Avatar } from '../src'\nimport styled from 'styled-components'\n\nconst List = Box.withComponent('ul')\nconst Item = Text.withComponent('li')\nconst Code = Text.withComponent('pre')\n\nconst Flag = styled(Link)`\n  display: inline-block;\n  background: url(//hackclub.com/orpheus_flag.svg) no-repeat;\n  background-position: top center;\n  width: 8rem;\n  height: 3rem;\n  z-index: 0;\n  margin-top: -1rem;\n`\n\nstoriesOf('👋 Welcome!', module).add('About the project', () => (\n  <Fragment>\n    <Flag href=\"https://hackclub.com\" />\n    <Heading.h1 fontSize={5}>Welcome!</Heading.h1>\n    <Text fontSize={3} my={2}>\n      This is{' '}\n      <Link href=\"https://hackclub.com\" underline children=\"Hack Club\" />\n      ’s Design System.\n    </Text>\n    <Text>It’s a collection of React components designed to:</Text>\n    <List>\n      <Item>Speed up design and development velocity</Item>\n      <Item>\n        Help create consistent, beautiful, and usable UI in our various websites\n      </Item>\n      <Item>\n        Promote best practices for accessibility and responsive web design\n      </Item>\n    </List>\n    <Text>We hope to accomplish these goals by:</Text>\n    <List>\n      <Item>Reducing the number of decisions needed when iterating on UI</Item>\n      <Item>Reducing the amount of code duplication in our apps</Item>\n      <Item>Serving as the standard for hackclub.com’s visual language</Item>\n      <Item>\n        Providing easy-to-use and extensible components for anyone to consume\n      </Item>\n    </List>\n    <Code bg=\"snow\" p={3} my={3}>\n      yarn add @hackclub/design-system\n    </Code>\n    <Flex align=\"center\" wrap>\n      <Button\n        href=\"https://github.com/hackclub/design-system\"\n        mr={2}\n        children=\"GitHub\"\n      />\n      <Button\n        href=\"https://www.npmjs.com/package/@hackclub/design-system\"\n        inverted\n        children=\"npm\"\n      />\n    </Flex>\n    <Flex align=\"center\" mt={4}>\n      <Avatar src=\"https://hackclub.com/team/lachlan.jpg\" size={48} mr={2} />\n      <Text>- @lachlanjc</Text>\n    </Flex>\n  </Fragment>\n))\n"
  },
  {
    "path": ".storybook/Avatar.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Avatar } from '../src'\n\nstoriesOf('Avatar', module)\n  .add(\n    'Avatar component',\n    withInfo({\n      inline: true,\n      text: 'A circular avatar image primitive.'\n    })(() => <Avatar src=\"https://hackclub.com/team/zach.jpg\" size={64} />)\n  )\n  .add('Team', () => (\n    <>\n      {['zach', 'max', 'lachlan', 'mingjie', 'athul'].map(key => (\n        <Avatar mr={2} src={`https://hackclub.com/team/${key}.jpg`} key={key} />\n      ))}\n    </>\n  ))\n"
  },
  {
    "path": ".storybook/BackgroundImage.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { BackgroundImage, Box, Text, Flex } from '../src'\n\nconst props = {\n  src:\n    'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',\n  'aria-label': 'Wooden desk with tools and chair'\n}\n\nstoriesOf('BackgroundImage', module)\n  .add(\n    'BackgroundImage component',\n    withInfo({\n      inline: true,\n      text: 'A <Box /> extension for adding a CSS background-image.'\n    })(() => (\n      <BackgroundImage {...props} width={256}>\n        <Text fontSize={6} bold align=\"center\" color=\"white\" p={4}>\n          Hello\n        </Text>\n      </BackgroundImage>\n    ))\n  )\n  .add('Fixed height', () => (\n    <BackgroundImage height={256} width={512} {...props}>\n      <Text fontSize={6} bold align=\"center\" color=\"white\" p={4}>\n        Height\n      </Text>\n    </BackgroundImage>\n  ))\n  .add('Responsive', () => (\n    <BackgroundImage width={[128, 256, 512]} height=\"256px\" {...props}>\n      <Text fontSize={6} bold align=\"center\" color=\"white\" p={4}>\n        Hello\n      </Text>\n    </BackgroundImage>\n  ))\n  .add('Scale', () => (\n    <BackgroundImage height=\"512px\" scale {...props}>\n      <Text fontSize={6} bold align=\"center\" color=\"white\" p={4}>\n        Hover\n      </Text>\n    </BackgroundImage>\n  ))\n"
  },
  {
    "path": ".storybook/Badge.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Badge } from '../src'\n\nstoriesOf('Badge', module)\n  .add(\n    'Badge component',\n    withInfo({\n      inline: true,\n      text: 'Use the <Badge /> component to render a primitive badge.'\n    })(() => <Badge bg=\"primary\">badge</Badge>)\n  )\n  .add('All colors', () => (\n    <React.Fragment>\n      {[\n        'primary',\n        'accent',\n        'error',\n        'warning',\n        'success',\n        'info',\n        'muted'\n      ].map(key => (\n        <Badge mr={2} bg={key} children={key} key={key} />\n      ))}\n    </React.Fragment>\n  ))\n"
  },
  {
    "path": ".storybook/BlockLink.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { BlockLink, BackgroundImage, Box, Text } from '../src'\n\nstoriesOf('BlockLink', module).add(\n  'BlockLink',\n  withInfo({\n    inline: true,\n    text: `<BlockLink /> is a styled-components wrapper of <Link /> component to remove text-decoration and color styles, and set display as block.`\n  })(() => (\n    <BlockLink href=\"https://hackclub.com\" target=\"_blank\">\n      <BackgroundImage\n        src=\"https://hackclub.com/social-photo_2.jpg'\"\n        width={640}\n      >\n        <Box p={4}>\n          <Text align=\"center\" color=\"white\">\n            Click to open hackclub.com in a new tab!\n          </Text>\n        </Box>\n      </BackgroundImage>\n    </BlockLink>\n  ))\n)\n"
  },
  {
    "path": ".storybook/Box.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Box } from '../src'\n\nstoriesOf('Box', module)\n  .add(\n    'Layout component',\n    withInfo({\n      text:\n        'A low-level layout component for setting width, margin, padding, and color',\n      inline: true\n    })(() => <Box p={3}>Hello</Box>)\n  )\n  .add('Padding', () => <Box p={3}>Hello</Box>)\n  .add('Margin', () => <Box m={3}>Hello</Box>)\n  .add('Color', () => (\n    <Box p={3} color=\"primary\">\n      Hello\n    </Box>\n  ))\n  .add('Background Color', () => (\n    <Box p={3} color=\"white\" bg=\"accent\">\n      Hello\n    </Box>\n  ))\n  .add('Width', () => (\n    <Box p={3} width={1 / 2} color=\"white\" bg=\"success\">\n      Half Width\n    </Box>\n  ))\n  .add('Pixel Width', () => (\n    <Box p={3} width={256} color=\"white\" bg=\"warning\">\n      256px width\n    </Box>\n  ))\n  .add('VW Width', () => (\n    <Box p={3} width=\"50vw\" color=\"white\" bg=\"error\">\n      50vw width\n    </Box>\n  ))\n  .add('Directional Padding', () => (\n    <Box p={3}>\n      <Box m={1} pt={3} color=\"white\" bg=\"red.5\">\n        Padding Top\n      </Box>\n      <Box m={1} pr={3} color=\"white\" bg=\"orange.5\">\n        Padding Right\n      </Box>\n      <Box m={1} pb={3} color=\"white\" bg=\"lime.5\">\n        Padding Bottom\n      </Box>\n      <Box m={1} pl={3} color=\"white\" bg=\"teal.5\">\n        Padding Left\n      </Box>\n      <Box m={1} px={3} color=\"white\" bg=\"blue.5\">\n        Padding X-Axis\n      </Box>\n      <Box m={1} py={3} color=\"white\" bg=\"violet.5\">\n        Padding Y-Axis\n      </Box>\n    </Box>\n  ))\n  .add('Directional Margin', () => (\n    <Box p={3}>\n      <Box mt={3} color=\"slate\" bg=\"red.1\">\n        Margin Top\n      </Box>\n      <Box mr={3} color=\"slate\" bg=\"orange.1\">\n        Margin Right\n      </Box>\n      <Box mb={3} color=\"slate\" bg=\"lime.1\">\n        Margin Bottom\n      </Box>\n      <Box ml={3} color=\"slate\" bg=\"teal.1\">\n        Margin Left\n      </Box>\n      <Box mx={3} color=\"slate\" bg=\"blue.1\">\n        Margin X-Axis\n      </Box>\n      <Box my={3} color=\"slate\" bg=\"violet.1\">\n        Margin Y-Axis\n      </Box>\n    </Box>\n  ))\n"
  },
  {
    "path": ".storybook/Button.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Button, Flex } from '../src'\n\nstoriesOf('Button', module)\n  .add(\n    'Button component',\n    withInfo({\n      inline: true,\n      text: 'Use the <Button /> component to render a primitive button.'\n    })(() => <Button>Button</Button>)\n  )\n  .add('Colors', () => (\n    <Flex wrap>\n      <Button mr={2}>Button</Button>\n      <Button bg=\"accent\" mr={2}>\n        Accent\n      </Button>\n      <Button bg=\"success\" mr={2}>\n        Success\n      </Button>\n      <Button bg=\"accent\" inverted mr={2}>\n        Inverted\n      </Button>\n    </Flex>\n  ))\n  .add('Font size', () => (\n    <Flex align=\"baseline\" wrap>\n      <Button mr={2} fontSize={1}>\n        Size 1\n      </Button>\n      <Button bg=\"accent\" mr={2} fontSize={2}>\n        Size 2\n      </Button>\n      <Button bg=\"info\" mr={2} fontSize={3}>\n        Size 3\n      </Button>\n      <Button bg=\"accent\" inverted mr={2} fontSize={4}>\n        Size 4\n      </Button>\n    </Flex>\n  ))\n  .add('Width', () => <Button width={1}>Full Width</Button>)\n  .add('Disabled', () => <Button disabled>Disabled</Button>)\n  .add('Scale', () => <Button scale>Scale</Button>)\n  .add('Chevrons', () => (\n    <Flex wrap>\n      <Button bg=\"info\" mr={3} chevronLeft>\n        Back\n      </Button>\n      <Button bg=\"success\" chevronRight>\n        Forward\n      </Button>\n    </Flex>\n  ))\n"
  },
  {
    "path": ".storybook/Card.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Card } from '../src'\n\nstoriesOf('Card', module)\n  .add(\n    'Card component',\n    withInfo({\n      inline: true,\n      text: 'Box extension to control box-shadow.'\n    })(() => (\n      <div>\n        <Card\n          boxShadowSize=\"sm\"\n          my={4}\n          p={3}\n          width={256}\n          color=\"black\"\n          bg=\"white\"\n        >\n          Small Shadow\n        </Card>\n        <Card\n          boxShadowSize=\"md\"\n          my={4}\n          p={3}\n          width={256}\n          color=\"black\"\n          bg=\"white\"\n        >\n          Medium Shadow\n        </Card>\n        <Card\n          boxShadowSize=\"lg\"\n          my={4}\n          p={3}\n          width={256}\n          color=\"black\"\n          bg=\"white\"\n        >\n          Large Shadow\n        </Card>\n        <Card\n          boxShadowSize=\"xl\"\n          my={4}\n          p={3}\n          width={256}\n          color=\"black\"\n          bg=\"white\"\n        >\n          XLarge Shadow\n        </Card>\n      </div>\n    ))\n  )\n  .add('Box Shadows with custom borders', () => (\n    <div>\n      <Card\n        boxShadowSize=\"sm\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"white\"\n        borderWidth={2}\n        borderColor=\"accent\"\n      >\n        Small Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"md\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"orange.1\"\n        borderWidth={2}\n        borderColor=\"warning\"\n      >\n        Medium Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"lg\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"teal.0\"\n        borderWidth={2}\n        borderColor=\"success\"\n      >\n        Large Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"xl\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"red.1\"\n        borderWidth={2}\n        borderColor=\"error\"\n      >\n        XLarge Shadow\n      </Card>\n    </div>\n  ))\n  .add('Box Shadows with varying border radii', () => (\n    <div>\n      <Card\n        boxShadowSize=\"sm\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"white\"\n        borderRadius={0}\n      >\n        Small Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"md\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"white\"\n        borderRadius={8}\n      >\n        Medium Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"lg\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"white\"\n        borderRadius={24}\n      >\n        Large Shadow\n      </Card>\n      <Card\n        boxShadowSize=\"xl\"\n        my={4}\n        p={3}\n        width={256}\n        color=\"black\"\n        bg=\"white\"\n        borderRadius=\"2rem\"\n      >\n        XLarge Shadow\n      </Card>\n    </div>\n  ))\n"
  },
  {
    "path": ".storybook/Colors.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport styled from 'styled-components'\nimport { Box, Flex, Text, Heading, theme } from '../src'\n\nconst keys = Object.keys(theme.colors).filter(\n  key => !Array.isArray(theme.colors[key])\n)\n\nconst next = keys.map(key => ({ key, value: theme.colors[key] }))\n\nconst Chip = props => <Box width={1} p={5} {...props} />\n\nconst Pre = styled(Text.withComponent('pre'))`\n  font-family: ${theme.mono};\n`\n\nconst Card = ({ name, color }) => (\n  <Box>\n    <Chip name={name} bg={color} />\n    <Text fontSize={2} m={0} bold>\n      {name}\n    </Text>\n    <Pre fontSize={0} m={0} color=\"muted\">\n      {color}\n    </Pre>\n  </Box>\n)\n\nstoriesOf('Color', module).add('Palette', () => (\n  <div>\n    <Heading.h1 p={3} fontSize={[4, 5]}>\n      Color Palette\n    </Heading.h1>\n    <Flex wrap>\n      {next.map(\n        color =>\n          !color.key[color.key.length - 1].match(/^\\d+$/) ? (\n            <Box key={color.key} p={3} width={[1, 1 / 2, 1 / 3, 1 / 4, 1 / 5]}>\n              <Card name={color.key} color={color.value} />\n            </Box>\n          ) : null\n      )}\n    </Flex>\n  </div>\n))\n"
  },
  {
    "path": ".storybook/Container.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Container } from '../src'\n\nstoriesOf('Container', module)\n  .add(\n    'Container component',\n    withInfo({\n      inline: true,\n      text:\n        '<Box> to constrain the width of content and center it. Uses theme.maxContainerWidth if no maxWidth is provided'\n    })(() => (\n      <Container p={4} bg=\"smoke\" style={{ height: '100vh' }}>\n        Container Component\n      </Container>\n    ))\n  )\n  .add('Custom maxWidth', () => (\n    <Container maxWidth={32} p={4} bg=\"smoke\" style={{ height: '100vh' }}>\n      32rem-width Container\n    </Container>\n  ))\n"
  },
  {
    "path": ".storybook/Field.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Field } from '../src'\n\nstoriesOf('Field', module)\n  .add(\n    'Field component',\n    withInfo({\n      inline: true,\n      text: 'Compound component for form fields.'\n    })(() => <Field name=\"fname\" label=\"First name\" placeholder=\"Zach\" />)\n  )\n  .add('with error', () => (\n    <Field\n      name=\"email\"\n      type=\"email\"\n      label=\"Email\"\n      placeholder=\"zach@hackclub.com\"\n      error=\"can’t be blank\"\n    />\n  ))\n  .add('textarea type', () => (\n    <Field\n      name=\"comment\"\n      type=\"textarea\"\n      label=\"Write a comment\"\n      placeholder=\"Be nice :)\"\n    />\n  ))\n  .add('select type', () => (\n    <Field name=\"select\" type=\"select\" label=\"Select something\">\n      <option>Two</option>\n      <option>Four</option>\n      <option>Eight</option>\n      <option>Sixteen</option>\n      <option>Thirty-Two</option>\n      <option>Sixty-Four</option>\n    </Field>\n  ))\n"
  },
  {
    "path": ".storybook/Flex.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Flex, Box } from '../src'\n\nstoriesOf('Flex', module)\n  .add('Basic', () => (\n    <Flex align=\"center\">\n      <Box width={1 / 2} p={3} color=\"white\" bg=\"primary\">\n        Flex\n      </Box>\n      <Box width={1 / 2} p={1} color=\"white\" bg=\"accent\">\n        Box\n      </Box>\n    </Flex>\n  ))\n  .add('Wrap', () => (\n    <Flex wrap>\n      <Box width={[1, 1 / 2]} p={3} color=\"white\" bg=\"primary\">\n        Flex\n      </Box>\n      <Box width={[1, 1 / 2]} p={3} color=\"white\" bg=\"accent\">\n        Wrap\n      </Box>\n      <Box width={[1, 1 / 2]} p={3} color=\"white\" bg=\"slate\">\n        Wrap\n      </Box>\n    </Flex>\n  ))\n  .add('Justify', () => (\n    <Flex justify=\"space-around\">\n      <Box width={1 / 3} p={2} color=\"white\" bg=\"primary\">\n        Flex\n      </Box>\n      <Box width={1 / 3} p={2} color=\"white\" bg=\"accent\">\n        Justify\n      </Box>\n    </Flex>\n  ))\n  .add('Direction', () => (\n    <Flex flexDirection=\"column\">\n      <Box width={1 / 3} p={2} color=\"white\" bg=\"primary\">\n        Flex\n      </Box>\n      <Box width={1 / 3} p={2} color=\"white\" bg=\"accent\">\n        Direction\n      </Box>\n    </Flex>\n  ))\n"
  },
  {
    "path": ".storybook/Heading.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Heading } from '../src'\n\nconst description =\n  'A type of the <Text> component' +\n  ' using HTML h1-h6 element for setting section headings,' +\n  ' supporting all <Text> props.'\n\nstoriesOf('Heading', module)\n  .add(\n    'Heading component',\n    withInfo({\n      inline: true,\n      text: description\n    })(() => <Heading m={3}>Heading component (renders h2)</Heading>)\n  )\n  .add('Using dot-notation with h1-h6', () => (\n    <section>\n      <Heading.h1>Heading h1</Heading.h1>\n      <Heading.h2>Heading h2 (default)</Heading.h2>\n      <Heading.h3>Heading h3</Heading.h3>\n      <Heading.h4>Heading h4</Heading.h4>\n      <Heading.h5>Heading h5</Heading.h5>\n      <Heading.h6>Heading h6</Heading.h6>\n    </section>\n  ))\n  .add('Using <Text> props', () => (\n    <section>\n      <Heading align=\"left\" bold fontSize={6} color=\"primary\">\n        Heading Left\n      </Heading>\n      <Heading align=\"center\" medium fontSize={5} color=\"warning\">\n        Heading Center\n      </Heading>\n      <Heading align=\"right\" regular fontSize={4} color=\"error\">\n        Heading Right\n      </Heading>\n    </section>\n  ))\n"
  },
  {
    "path": ".storybook/Hide.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { Hide, Flex } from '../src'\n\nstoriesOf('Hide', module).add('Hide', () => (\n  <Flex justify=\"space-between\" color=\"white\">\n    <Hide xs p={2} bg=\"red.5\">\n      Hide xs\n    </Hide>\n    <Hide sm p={2} bg=\"orange.5\">\n      Hide sm\n    </Hide>\n    <Hide md p={2} bg=\"green.5\">\n      Hide md\n    </Hide>\n    <Hide lg p={2} bg=\"blue.5\">\n      Hide lg\n    </Hide>\n    <Hide xl p={2} bg=\"violet.5\">\n      Hide xl\n    </Hide>\n  </Flex>\n))\n"
  },
  {
    "path": ".storybook/Icon.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Icon, Flex, LargeButton } from '../src'\n\nstoriesOf('Icon', module)\n  .add(\n    'Icon component',\n    withInfo({\n      inline: true,\n      text: 'A wrapper component for @hackclub/icons.'\n    })(() => <Icon glyph=\"flag\" color=\"primary\" size={48} />)\n  )\n  .add('Examples', () => (\n    <div>\n      <Flex align=\"center\" mb={3}>\n        <Icon glyph=\"challenge\" size={128} color=\"accent\" />\n        <Icon glyph=\"event-code\" size={64} color=\"info\" mx={2} />\n        <Icon glyph=\"important\" size={32} color=\"primary\" />\n      </Flex>\n      <LargeButton\n        href=\"https://hackclub-icons.now.sh/\"\n        target=\"_blank\"\n        chevronRight\n      >\n        See all icons\n      </LargeButton>\n    </div>\n  ))\n"
  },
  {
    "path": ".storybook/IconButton.js",
    "content": "import React, { Fragment } from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { IconButton } from '../src'\n\nstoriesOf('IconButton', module)\n  .add(\n    'IconButton component',\n    withInfo({\n      inline: true,\n      text: 'Use the <IconButton /> component to render a primitive button.'\n    })(() => <IconButton glyph=\"view-close\" color=\"error\" />)\n  )\n  .add('Rectangular button', () => (\n    <IconButton glyph=\"send\" bg=\"info\" color=\"white\" />\n  ))\n  .add('Circular button', () => (\n    <IconButton glyph=\"checkmark\" bg=\"success\" color=\"white\" circle />\n  ))\n  .add('Disabled circular buttons', () => (\n    <Fragment>\n      <IconButton disabled glyph=\"view-close\" color=\"error\" />\n      <IconButton disabled glyph=\"view-close\" bg=\"error\" color=\"white\" circle />\n    </Fragment>\n  ))\n"
  },
  {
    "path": ".storybook/Image.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Image, Box } from '../src'\n\nconst text = 'A low-level layout component that renders an image'\nconst props = {\n  src: 'https://hackclub.com/social-photo_2.jpg',\n  alt: 'Smiling students at a hackathon'\n}\n\nstoriesOf('Image', module)\n  .add(\n    'Image component',\n    withInfo({\n      text,\n      inline: true\n    })(() => <Image {...props} />)\n  )\n  .add('Responsive width, with Box', () => (\n    <Box width={1 / 2}>\n      <Image {...props} />\n    </Box>\n  ))\n"
  },
  {
    "path": ".storybook/Input.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Box, Input, Label, theme } from '../src'\n\nstoriesOf('Input', module)\n  .add(\n    'Input component',\n    withInfo({\n      inline: true,\n      text:\n        'Simple styled input component that accepts a color and optionally, an error message.'\n    })(() => <Input my={3} id=\"hello\" />)\n  )\n  .add('With external label', () => (\n    <Box width={256}>\n      <Label fontSize={4} htmlFor=\"sample-input\">\n        Label!\n      </Label>\n      <Input id=\"sample-input\" placeholder=\"Click the label\" />\n    </Box>\n  ))\n"
  },
  {
    "path": ".storybook/Label.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Label, Input } from '../src'\n\nstoriesOf('Label', module)\n  .add(\n    'Label component',\n    withInfo({\n      inline: true,\n      text:\n        'Simple styled label component that supports a number of the styled-system props.'\n    })(() => <Label m={3}>Label Component</Label>)\n  )\n  .add('Using fontSize', () => (\n    <div>\n      <Label fontSize={6}>Label with fontSize 6</Label>\n      <Label fontSize={5}>Label with fontSize 5</Label>\n      <Label fontSize={4}>Label with fontSize 4</Label>\n      <Label fontSize={3}>Label with fontSize 3</Label>\n      <Label fontSize={2}>Label with fontSize 2</Label>\n      <Label fontSize={1}>Label with fontSize 1</Label>\n      <Label fontSize={0}>Label with fontSize 0</Label>\n    </div>\n  ))\n  .add('Spacing', () => (\n    <div>\n      <Label mt={4} mb={2}>\n        A tish of margin\n      </Label>\n      <Label pl={3}>A dash of padding</Label>\n    </div>\n  ))\n  .add('Colors', () => (\n    <div>\n      <Label color=\"primary\">A primary label</Label>\n      <Label color=\"accent\">An accent label</Label>\n    </div>\n  ))\n  .add('htmlFor', () => (\n    <div>\n      Clicking{' '}\n      <Label fontSize={4} htmlFor=\"sample-input\">\n        here\n      </Label>{' '}\n      should focus on the input element.\n      <br />\n      <Input id=\"sample-input\" />\n    </div>\n  ))\n"
  },
  {
    "path": ".storybook/LargeButton.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { LargeButton } from '../src'\n\nstoriesOf('LargeButton', module)\n  .add(\n    'LargeButton component',\n    withInfo({\n      inline: true,\n      text: 'A bigger <Button /> component.'\n    })(() => <LargeButton>Button</LargeButton>)\n  )\n  .add('Colors', () => (\n    <div>\n      <LargeButton mr={3}>Button</LargeButton>\n      <LargeButton bg=\"accent\" mr={3}>\n        Accent\n      </LargeButton>\n      <LargeButton bg=\"success\" mr={3}>\n        Success\n      </LargeButton>\n      <LargeButton bg=\"accent\" inverted mr={3}>\n        Inverted\n      </LargeButton>\n    </div>\n  ))\n  .add('Width', () => <LargeButton width={1}>Full Width</LargeButton>)\n  .add('Disabled', () => <LargeButton disabled>Disabled</LargeButton>)\n"
  },
  {
    "path": ".storybook/Layouts.js",
    "content": "import React from 'react'\nimport styled from 'styled-components'\nimport { storiesOf } from '@storybook/react'\nimport { Flex, Box, Text, Icon, Image, Heading, Card, theme } from '../src'\n\nstoriesOf('Layout Examples', module)\n  .add('Grid', () => (\n    <Box p={4}>\n      <Flex wrap mx={-3} color=\"white\">\n        <Box width={[1, 1 / 2]} px={3} mb={4}>\n          <Box bg=\"indigo.4\" p={3}>\n            <Text>Hello</Text>\n          </Box>\n        </Box>\n        <Box width={[1, 1 / 2]} px={3} mb={4}>\n          <Box bg=\"indigo.5\" p={3}>\n            <Text>Hello</Text>\n          </Box>\n        </Box>\n      </Flex>\n    </Box>\n  ))\n  .add('Two-column', () => (\n    <Flex color=\"white\">\n      <Box px={3} width={1 / 4}>\n        <Box bg=\"green.6\" style={{ minHeight: '50vh' }}>\n          <Text p={3}>Hello</Text>\n        </Box>\n      </Box>\n      <Box px={3} width={3 / 4}>\n        <Box bg=\"teal.6\" style={{ minHeight: '50vh' }}>\n          <Text p={3}>Hello</Text>\n        </Box>\n      </Box>\n    </Flex>\n  ))\n  .add('Navbar', () => (\n    <Flex p={2} align=\"center\" color=\"white\" bg=\"accent\">\n      <Border mr={3}>\n        <Icon glyph=\"menu\" />\n      </Border>\n      <Text bold mx={2}>\n        Hello\n      </Text>\n      <Text mx={2}>Navbar</Text>\n      <Text ml=\"auto\" mr={2}>\n        Right Side\n      </Text>\n    </Flex>\n  ))\n  .add('Tiled Cards', () => (\n    <Flex wrap>\n      {cards.map(card => (\n        <Box key={card.id} p={3} width={[1 / 2, 1 / 3, 1 / 4]}>\n          <Tile {...card} />\n        </Box>\n      ))}\n    </Flex>\n  ))\n\nconst Border = styled(Box)`\n  border: 1px solid ${({ theme }) => theme.colors.smoke};\n  border-radius: ${({ theme }) => theme.radius};\n  line-height: 0;\n`\n\nconst Tile = ({ image, title, text }) => (\n  <Card boxShadowSize=\"sm\">\n    <Image src={image} width=\"512\" height=\"256\" />\n    <Box p={2}>\n      <Heading fontSize={2} bold>\n        {title}\n      </Heading>\n      <Text fontSize={1} color=\"slate\">\n        {text}\n      </Text>\n    </Box>\n  </Card>\n)\n\nconst cards = Array.from({ length: 12 }).map((n, i) => ({\n  id: i,\n  title: 'Hello' + i,\n  text: 'Card',\n  image: `http://placehold.it/512x256/${theme.colors.accent.replace('#', '')}`\n}))\n"
  },
  {
    "path": ".storybook/Link.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Link } from '../src'\n\nstoriesOf('Link', module)\n  .add(\n    'Link component',\n    withInfo({\n      inline: true,\n      text: '<Text> extension for links.'\n    })(() => (\n      <Link href=\"https://hackclub.com\" target=\"_blank\">\n        Homepage\n      </Link>\n    ))\n  )\n  .add('Open in same tab', () => (\n    <Link href=\"https://hackclub.com\" target=\"_self\">\n      Open the homepage in same tab\n    </Link>\n  ))\n  .add('Color underline', () => (\n    <Link href=\"https://hackclub.com\" color=\"primary\" bold underline>\n      I’m extra Hack Club\n    </Link>\n  ))\n  .add('Chevrons', () => (\n    <Link href=\"https://hackclub.com\" fontSize={3} hoverline bold chevronRight>\n      Explore more\n    </Link>\n  ))\n"
  },
  {
    "path": ".storybook/Loading.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Loading } from '../src'\n\nstoriesOf('Loading', module).add(\n  'Loading component',\n  withInfo({\n    inline: true,\n    text: 'An animated loading indicator. Centers itself in parent container.'\n  })(() => <Loading />)\n)\n"
  },
  {
    "path": ".storybook/OutlineButton.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { OutlineButton, LargeButton } from '../src'\n\nstoriesOf('OutlineButton', module)\n  .add(\n    'OutlineButton component',\n    withInfo({\n      inline: true,\n      text: 'A <Button /> component with only an outline.'\n    })(() => <OutlineButton>Button</OutlineButton>)\n  )\n  .add('Colors', () => (\n    <div>\n      <OutlineButton mr={3}>Button</OutlineButton>\n      <OutlineButton bg=\"accent\" mr={3}>\n        Accent\n      </OutlineButton>\n      <OutlineButton bg=\"success\" mr={3}>\n        Success\n      </OutlineButton>\n    </div>\n  ))\n  .add('Width', () => <OutlineButton width={1}>Full Width</OutlineButton>)\n  .add('Disabled', () => <OutlineButton disabled>Disabled</OutlineButton>)\n"
  },
  {
    "path": ".storybook/Section.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Section, Heading, Text } from '../src'\n\nstoriesOf('Section', module).add(\n  'Section component',\n  withInfo({\n    inline: true,\n    text:\n      'A section component meant to be used with a solid/gradient background.'\n  })(() => (\n    <Section bg=\"accent\">\n      <Heading.h1>Hello</Heading.h1>\n      <Text>Hello</Text>\n    </Section>\n  ))\n)\n"
  },
  {
    "path": ".storybook/Sheet.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Sheet } from '../src'\n\nstoriesOf('Sheet', module).add(\n  'Sheet component',\n  withInfo({\n    inline: true,\n    text: 'A large, raised container card.'\n  })(() => (\n    <Sheet maxWidth={32} color=\"black\" my={5}>\n      Hi, I’m a Sheet!\n    </Sheet>\n  ))\n)\n"
  },
  {
    "path": ".storybook/Slider.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Slider } from '../src'\n\nstoriesOf('Slider', module).add(\n  'Slider component',\n  withInfo({\n    inline: true,\n    text: 'Range input slider.'\n  })(() => <Slider />)\n)\n"
  },
  {
    "path": ".storybook/Submit.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Submit } from '../src'\n\nstoriesOf('Submit', module).add(\n  'Submit component',\n  withInfo({\n    inline: true,\n    text: 'A form component for a submit button. Available in two sizes.'\n  })(() => (\n    <form>\n      <Submit value=\"Standard\" mr={3} />\n      <Submit.lg value=\"Large\" />\n    </form>\n  ))\n)\n"
  },
  {
    "path": ".storybook/Text.js",
    "content": "import React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { withInfo } from '@storybook/addon-info'\nimport { Text } from '../src'\n\nstoriesOf('Text', module)\n  .add(\n    'Typography component',\n    withInfo({\n      inline: true,\n      text:\n        'A low-level component for setting font-size, typographic styles, margin, and color'\n    })(() => <Text m={3}>Hello</Text>)\n  )\n  .add('fontSize', () => (\n    <div>\n      <Text fontSize={6}>Hello 6</Text>\n      <Text fontSize={5}>Hello 5</Text>\n      <Text fontSize={4}>Hello 4</Text>\n      <Text fontSize={3}>Hello 3</Text>\n      <Text fontSize={2}>Hello 2</Text>\n      <Text fontSize={1}>Hello 1</Text>\n      <Text fontSize={0}>Hello 0</Text>\n    </div>\n  ))\n  .add('align', () => (\n    <div>\n      <Text align=\"left\">Hello Left</Text>\n      <Text align=\"center\">Hello Center</Text>\n      <Text align=\"right\">Hello Right</Text>\n    </div>\n  ))\n  .add('regular', () => <Text regular>Hello Regular</Text>)\n  .add('bold', () => <Text bold>Hello Bold</Text>)\n  .add('caps', () => <Text caps>Hello Caps</Text>)\n  .add('maxWidth', () => (\n    <Text maxWidth={16}>\n      Hello I am some very long text that will be wrapped at 16rem because of my\n      maxWidth prop!\n    </Text>\n  ))\n  .add('strikethrough', () => <Text.s>Hello Strikethrough</Text.s>)\n  .add('spacing', () => (\n    <div>\n      <Text mt={4} mb={2}>\n        Hello Margin\n      </Text>\n      <Text p={3}>Hello Padding</Text>\n    </div>\n  ))\n  .add('color', () => (\n    <div>\n      <Text color=\"primary\">Hello Primary</Text>\n      <Text color=\"accent\">Hello Accent</Text>\n      <Text color=\"error\">Hello Error</Text>\n    </div>\n  ))\n"
  },
  {
    "path": ".storybook/config.js",
    "content": "import React from 'react'\nimport { configure, addDecorator } from '@storybook/react'\nimport { ThemeProvider, Box } from '../src'\n\naddDecorator(story => (\n  <ThemeProvider webfonts>\n    <Box p={3}>{story()}</Box>\n  </ThemeProvider>\n))\n\nconst req = require.context('.', true, /\\.js$/)\n\nconst load = () => {\n  req.keys().forEach(req)\n}\n\nconfigure(load, module)\n"
  },
  {
    "path": ".travis.yml",
    "content": "language: node_js\nnode_js:\n  - 12\nafter_success:\n  - npm run storybook\ndeploy:\n  provider: pages\n  skip_cleanup: true\n  github_token: $GH_TOKEN\n  local_dir: .site\n  on:\n    branch: master\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing\n\nIf you’d like to contribute to the design system, we’d love to have your help.\n\nContributing doesn’t necessarily mean committing code, we also encourage you to:\n\n- Open issues\n- Join in on discussions in issues and PRs\n- Help write documentation (storybook)\n- Use the Design System and provide feedback\n\n## Local Development\n\nTo contribute code to the Design System, first you’ll need to set it up for local development.\n\n### Clone the repo\n\n```sh\ngit clone https://github.com/hackclub/design-system.git\ncd design-system\n```\n\n### Install dependencies\n\n```sh\nyarn\n```\n\n### Running tests\n\nWe use [Jest][jest] for testing, including unit tests for functionality and [snapshot testing][snapshots] for components.\n\n```sh\nyarn test\n```\n\nIf you make intentional changes to an existing component, you will need to update its snapshot:\n\n```sh\nyarn test -u\n```\n\nIf you want to check test coverage (goal is 100% coverage):\n\n```sh\nyarn run coverage\n```\n\nJest will run, generate a coverage report, and open it in your browser.\n\n### Storybook\n\nWe use [Storybook][storybook] for isolated UI component development, and\ndocumentation for all the available components.\n\nTo run storybook locally:\n\n```sh\nyarn run dev\nopen http://localhost:8000/\n```\n\n## Creating a New Component\n\nTo make a new component you’ll need to make three files: the source code,\nthe test, and the storybook demo.\n\n1. **Source file.** This goes in `src/New.js`, and should export a\n   `styled-component` with `export default New` at the end and the component’s\n   `propTypes` defined. Add an export to `src/index.js` so the component can be\n   used elsewhere.\n2. **Test.** The test should verify the core functionality works, using\n   Jest’s snapshot testing. It should be located at `src/__tests__/New.js`,\n   and follow the others’ formats, like [this example test][example_test].\n   Once you’ve written the test, check that it passes (`npm test -- -u`) and\n   verify 100% test coverage of your component (`npm run coverage`).\n3. **Storybook.** We use the storybook as a development environment and for\n   documentation. Create `.storybook/New.js` following the format of\n   [this example storybook][example_storybook] demoing sample usage and props.\n\n[jest]: https://facebook.github.io/jest/\n[snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html#content\n[storybook]: https://storybook.js.org\n[example_test]: ../src/__tests__/Badge.js\n[example_storybook]: ../.storybook/Badge.js\n"
  },
  {
    "path": "LICENSE.md",
    "content": "# The MIT License (MIT)\n\nCopyright (c) 2017–2019 hackclub.com\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"
  },
  {
    "path": "README.md",
    "content": "# Hack Club Design System\n\n> Hack Club has transitioned to using `hackclub/theme` as its design system. This project is only being patched when needed.\n\nhttps://design.hackclub.com/\n\n```sh\nyarn add @hackclub/design-system\n```\n\nThis project is heavily inspired by [Priceline.com’s design system][pcln].\n\n## Contributing\n\nPlease be sure to read the [Contributing](docs/Contributing.md) doc :)\n\n## [Documentation](docs)\n\n- [Getting Started](docs/GettingStarted.md)\n- [Contributing](docs/Contributing.md)\n- [Theme](docs/Theme.md)\n- [ThemeProvider](docs/ThemeProvider.md)\n\n## Goals\n\nThe core goals of this project are to:\n\n- Speed up design and development velocity\n- Help create consistent, beautiful, and usable UI in our various websites\n- Promote best practices for accessibility and responsive web design\n\nWe hope to accomplish these goals by:\n\n- Reducing the number of decisions needed when iterating on UI\n- Reducing the amount of code duplication in our apps\n- Serving as the standard for hackclub.com’s visual language\n- Providing easy-to-use and extensible components for anyone to consume\n\n[pcln]: https://github.com/pricelinelabs/design-system\n[site]: https://design.hackclub.com/\n\n[MIT License](LICENSE.md)\n"
  },
  {
    "path": "docs/Contributing.md",
    "content": "# Contributing\n\nIf you’d like to contribute to the design system, we’d love to have your help.\n\nContributing doesn’t necessarily mean committing code, we also encourage you to:\n\n- Open issues\n- Join in on discussions in issues and PRs\n- Help write documentation (storybook)\n- Use the Design System and provide feedback\n\n## Local Development\n\nTo contribute code to the Design System, first you’ll need to set it up for local development.\n\n### Clone the repo\n\n```sh\ngit clone https://github.com/hackclub/design-system.git\ncd design-system\n```\n\n### Install dependencies\n\n```sh\nyarn\n```\n\n### Running tests\n\nWe use [Jest][jest] for testing, including unit tests for functionality and [snapshot testing][snapshots] for components.\n\n```sh\nyarn test\n```\n\nIf you make intentional changes to an existing component, you will need to update its snapshot:\n\n```sh\nyarn test -u\n```\n\nIf you want to check test coverage (goal is 100% coverage):\n\n```sh\nyarn run coverage\n```\n\nJest will run, generate a coverage report, and open it in your browser.\n\n### Storybook\n\nWe use [Storybook][storybook] for isolated UI component development, and\ndocumentation for all the available components.\n\nTo run storybook locally:\n\n```sh\nyarn run dev\nopen http://localhost:8000/\n```\n\n## Creating a New Component\n\nTo make a new component you’ll need to make three files: the source code,\nthe test, and the storybook demo.\n\n1. **Source file.** This goes in `src/New.js`, and should export a\n   `styled-component` with `export default New` at the end and the component’s\n   `propTypes` defined. Add an export to `src/index.js` so the component can be\n   used elsewhere.\n2. **Test.** The test should verify the core functionality works, using\n   Jest’s snapshot testing. It should be located at `src/__tests__/New.js`,\n   and follow the others’ formats, like [this example test][example_test].\n   Once you’ve written the test, check that it passes (`npm test -- -u`) and\n   verify 100% test coverage of your component (`npm run coverage`).\n3. **Storybook.** We use the storybook as a development environment and for\n   documentation. Create `.storybook/New.js` following the format of\n   [this example storybook][example_storybook] demoing sample usage and props.\n\n[jest]: https://facebook.github.io/jest/\n[snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html#content\n[storybook]: https://storybook.js.org\n[example_test]: ../src/__tests__/Badge.js\n[example_storybook]: ../.storybook/Badge.js\n"
  },
  {
    "path": "docs/GettingStarted.md",
    "content": "# Getting Started\n\nInstall the Design System in your application\n\n```sh\nyarn add @hackclub/design-system\n```\n\n## ThemeProvider\n\nWrap the root of your application with the `ThemeProvider` component,\nwhich adds the Design System theme to context for use in `styled-components`\nand sets typographic defaults (including loading our webfont, Averta).\nThis should only be included once in your application.\n\n```jsx\nimport React from 'react'\nimport { ThemeProvider } from '@hackclub/design-system'\n\nconst App = () => (\n  <ThemeProvider webfonts>\n    <h1>Hello</h1>\n  </ThemeProvider>\n)\n```\n\n## Primitive UI Components\n\nThe preferred way of using the design system in a React application is with UI primitives.\nWith effective use of the UI primitives, you can reduce the need to write custom CSS in your application.\n\n```jsx\nimport React from 'react'\nimport { Box, Text } from '@hackclub/design-system'\n\nconst SomeView = props => (\n  <Box bg=\"primary\" p={3}>\n    <Text color=\"white\">Hello</Text>\n  </Box>\n)\n```\n"
  },
  {
    "path": "docs/README.md",
    "content": "# Documentation\n\n- [Getting Started](GettingStarted.md)\n- [Contributing](Contributing.md)\n- [ThemeProvider](ThemeProvider.md)\n- [Theme](Theme.md)\n"
  },
  {
    "path": "docs/Theme.md",
    "content": "# Theme\n\nThe theme style constants should be used whenever low-level access to font\nsizes, margin, padding, media queries, and colors are needed.\n\n```js\nimport { theme } from '@hackclub/design-system'\n\n// or\nimport { colors, mediaQueries, fontSizes, space } from '@hackclub/design-system'\n```\n\n## Colors\n\n```js\nimport { colors } from '@hackclub/design-system'\n\ncolors.primary // '#e42d42'\n```\n\n## Font Sizes\n\n```js\nimport { fontSizes } from '@hackclub/design-system'\n\nfontSizes[2] // 16\n```\n\nThe theme includes a typographic scale as the `fontSizes` array.\nUse these values whenever declaring a `font-size` in CSS.\n\n## Spacing Scale\n\nThe `space` array should be used whenever declaring margin or padding values.\n\n```js\nimport { space } from '@hackclub/design-system'\n\nspace[0] // 0\nspace[1] // 4\nspace[2] // 8\nspace[3] // 16\nspace[4] // 32\nspace[5] // 64\nspace[6] // 128\n```\n\n## Media Queries\n\nThe `mediaQueries` array can be used to add styles targeted for different\nscreen sizes. The design system is built for mobile-first design, so all media\nqueries use min-width.\n\n```js\nimport { mediaQueries } from '@hackclub/design-system'\n\nmediaQueries[0] // @media screen and (min-width:32em)\nmediaQueries[1] // @media screen and (min-width:48em)\nmediaQueries[2] // @media screen and (min-width:64em)\nmediaQueries[3] // @media screen and (min-width:80em)\n\nmediaQueries.sm // alias for mediaQueries[0]\nmediaQueries.md // alias for mediaQueries[1]\nmediaQueries.lg // alias for mediaQueries[2]\nmediaQueries.xl // alias for mediaQueries[3]\n```\n"
  },
  {
    "path": "docs/ThemeProvider.md",
    "content": "# ThemeProvider\n\nThe ThemeProvider component is a wrapper around the styled-components’ [ThemeProvider][1]\n\nWrap the root of your application with the `ThemeProvider` component,\nwhich adds the Design System theme to context for use in styled-components\nand sets typographic defaults (including, optionally, loading our webfont, Averta).\nThis should only be included once in your application.\n\n```jsx\n<ThemeProvider webfonts>\n  <Heading>Hello</Heading>\n</ThemeProvider>\n```\n\n[1]:\thttps://www.styled-components.com/docs/advanced#theming\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@hackclub/design-system\",\n  \"version\": \"0.0.1-18\",\n  \"description\": \"Hack Club Design System\",\n  \"main\": \"dist/index.js\",\n  \"scripts\": {\n    \"prepare\": \"babel src -d dist --ignore __tests__ && yarn run fmt\",\n    \"dev\": \"start-storybook -p 9000 -c .storybook\",\n    \"build\": \"rm -rf .site && build-storybook -c .storybook -o .site\",\n    \"deploy\": \"storybook-to-ghpages\",\n    \"fmt\": \"npx prettier {.storybook,src}/**/*.js --single-quote --no-semi --write\",\n    \"coverage\": \"jest --coverage && serve coverage -o\",\n    \"test\": \"jest\"\n  },\n  \"author\": \"Lachlan Campbell <lachlan@hackclub.com>\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@hackclub/icons\": \"^0.0.3\",\n    \"lodash\": \"^4.17.15\",\n    \"palx\": \"1.0.2\",\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"^16.12.0\",\n    \"react-dom\": \"^16.12.0\",\n    \"styled-components\": \"3.4.10\",\n    \"styled-system\": \"1.1.7\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.8.3\",\n    \"@babel/core\": \"^7.8.3\",\n    \"@babel/preset-env\": \"^7.8.3\",\n    \"@babel/preset-react\": \"^7.8.3\",\n    \"@storybook/addon-info\": \"^5.3.9\",\n    \"@storybook/react\": \"^5.3.9\",\n    \"@storybook/storybook-deployer\": \"^2.8.1\",\n    \"babel-jest\": \"^24.9.0\",\n    \"babel-loader\": \"^8.0.6\",\n    \"babel-preset-stage-0\": \"^6.24.1\",\n    \"enzyme\": \"^3.11.0\",\n    \"enzyme-adapter-react-16\": \"^1.15.2\",\n    \"jest\": \"^24.9.0\",\n    \"jest-styled-components\": \"^6.3.4\",\n    \"react-test-renderer\": \"^16.12.0\"\n  },\n  \"jest\": {\n    \"coverageReporters\": [\n      \"text\",\n      \"lcov\",\n      \"html\"\n    ],\n    \"collectCoverage\": true,\n    \"coveragePathIgnorePatterns\": [\n      \"dist/\"\n    ],\n    \"setupFilesAfterEnv\": [\n      \"./test-setup.js\"\n    ]\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/hackclub/design-system.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/hackclub/design-system/issues\"\n  },\n  \"homepage\": \"https://design.hackclub.com\"\n}\n"
  },
  {
    "path": "src/Avatar.js",
    "content": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\n\nconst px = a => (typeof a === 'number' ? `${a}px` : a)\n\nconst Avatar = styled(Box.withComponent('img'))`\n  border-radius: ${({ theme }) => theme.pill};\n  display: inline-block;\n  width: ${props => px(props.size)};\n  height: ${props => px(props.size)};\n`\n\nAvatar.displayName = 'Avatar'\n\nAvatar.propTypes = {\n  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n}\n\nAvatar.defaultProps = {\n  theme,\n  size: 48\n}\n\nexport default Avatar\n"
  },
  {
    "path": "src/BackgroundImage.js",
    "content": "import Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\nimport styled, { css } from 'styled-components'\n\nconst src = props => props.src && { backgroundImage: `url(${props.src})` }\n\nconst height = props => props.height && { height: props.height }\n\nconst BackgroundImage = styled(Box)`\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  ${src} ${height};\n\n  ${props =>\n    props.scale &&\n    css`\n      overflow: hidden;\n      transition: ${({ theme }) => theme.transition} background-size;\n      will-change: background-size;\n      background-size: auto ${({ theme }) => theme.scaleFactor * 100}%;\n      &:hover {\n        background-size: auto\n          ${({ theme }) => (theme.scaleFactor + 1 / 16) * 100}%;\n      }\n      ${({ theme }) => theme.mediaQueries.reduceMotion} {\n        transition: none;\n        background-size: cover !important;\n      }\n    `};\n`\n\nBackgroundImage.displayName = 'BackgroundImage'\n\nBackgroundImage.propTypes = {\n  /** background-image url */\n  src: PropTypes.string.isRequired,\n  /** add hover animation */\n  scale: PropTypes.bool,\n  /** accessible label */\n  'aria-label': PropTypes.string.isRequired\n}\n\nBackgroundImage.defaultProps = {\n  theme,\n  bg: 'smoke'\n}\n\nexport default BackgroundImage\n"
  },
  {
    "path": "src/Badge.js",
    "content": "import styled from 'styled-components'\nimport Text from './Text'\nimport theme from './theme'\n\nconst Badge = styled(Text.span)`\n  border-radius: ${({ theme }) => theme.pill};\n  display: inline-block;\n  font-weight: normal;\n  letter-spacing: 0.0375em;\n  line-height: 1.125;\n  text-transform: uppercase;\n`\n\nBadge.displayName = 'Badge'\n\nBadge.defaultProps = {\n  theme,\n  px: 2,\n  py: 1,\n  bg: 'primary',\n  color: 'white',\n  fontSize: 1\n}\n\nexport default Badge\n"
  },
  {
    "path": "src/BlockLink.js",
    "content": "import styled from 'styled-components'\nimport Text from './Text'\n\nconst BlockLink = styled(Text.withComponent('a')).attrs({ color: 'inherit' })`\n  display: block;\n  text-decoration: none;\n`\n\nBlockLink.displayName = 'BlockLink'\n\nexport default BlockLink\n"
  },
  {
    "path": "src/Box.js",
    "content": "import React from 'react'\nimport styled from 'styled-components'\nimport {\n  space,\n  width,\n  color,\n  fontSize,\n  textAlign,\n  propTypes\n} from 'styled-system'\nimport theme from './theme'\n\nconst Box = styled.div([], space, width, color, fontSize, textAlign)\n\nBox.displayName = 'Box'\nBox.header = Box.withComponent('header')\nBox.main = Box.withComponent('main')\nBox.article = Box.withComponent('article')\nBox.section = Box.withComponent('section')\nBox.footer = Box.withComponent('footer')\n\nBox.defaultProps = {\n  theme\n}\n\nBox.propTypes = {\n  ...propTypes.textAlign,\n  ...propTypes.fontSize,\n  ...propTypes.space,\n  ...propTypes.color\n}\n\nexport default Box\n"
  },
  {
    "path": "src/Button.js",
    "content": "import Box from './Box'\nimport theme, { cx, hexa } from './theme'\nimport { css } from 'styled-components'\nimport PropTypes from 'prop-types'\n\nconst Button = Box.withComponent('a').extend`\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: ${({ theme }) => theme.bold};\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ${({ theme }) => theme.transition} box-shadow;\n  box-shadow: 0 2px 4px ${({ theme }) => theme.shadowColor};\n  border-radius: ${({ theme }) => theme.pill};\n  border: none;\n\n  ${props =>\n    props.inverted && {\n      backgroundColor: cx(props.color),\n      color: cx(props.bg)\n    }};\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px\n      ${props =>\n        props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px\n      ${props =>\n        props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};\n  }\n\n  ${props => props.disabled && { opacity: 0.25, cursor: 'not-allowed' }};\n\n  ${props =>\n    props.scale &&\n    css`\n      transition: ${({ theme }) => theme.transition} all;\n      will-change: transform;\n      transform: scale(1);\n      &:hover,\n      &:focus {\n        transform: scale(${({ theme }) => theme.scaleFactor});\n      }\n      ${({ theme }) => theme.mediaQueries.reduceMotion} {\n        transform: none;\n      }\n    `};\n\n  ${props =>\n    props.chevronLeft &&\n    css`\n      &:before {\n        content: '«';\n        padding-right: 0.25em;\n      }\n    `};\n  ${props =>\n    props.chevronRight &&\n    css`\n      &:after {\n        content: '»';\n        padding-left: 0.25em;\n      }\n    `};\n`\n\nButton.displayName = 'Button'\n\nButton.propTypes = {\n  /** flip colors */\n  inverted: PropTypes.bool,\n  /** add hover/focus animation */\n  scale: PropTypes.bool,\n  /** add left text arrows */\n  chevronLeft: PropTypes.bool,\n  /** add right text arrows */\n  chevronRight: PropTypes.bool\n}\n\nButton.defaultProps = {\n  theme,\n  bg: 'primary',\n  color: 'white',\n  fontSize: 3,\n  m: 0,\n  px: 3,\n  py: 2\n}\n\nButton.button = Button.withComponent('button')\nButton.input = Button.withComponent('input')\n\nexport default Button\n"
  },
  {
    "path": "src/Card.js",
    "content": "import styled from 'styled-components'\nimport Box from './Box'\nimport theme from './theme'\nimport PropTypes from 'prop-types'\nimport { borderRadius, propTypes } from 'styled-system'\n\nconst boxShadow = props => {\n  const boxShadows = {\n    sm: theme.boxShadows[0],\n    md: theme.boxShadows[1],\n    lg: theme.boxShadows[2],\n    xl: theme.boxShadows[3]\n  }\n  return { boxShadow: boxShadows[props.boxShadowSize] }\n}\n\nconst boxBorder = props => ({\n  border:\n    props.borderWidth > 0\n      ? `${props.borderWidth}px solid ${props.theme.colors[props.borderColor]}`\n      : null\n})\n\nconst Card = styled(Box)([], boxShadow, boxBorder, borderRadius)\n\nCard.propTypes = {\n  /** use scale alias for theme values or null to remove shadow */\n  boxShadowSize: PropTypes.oneOf([null, 'sm', 'md', 'lg', 'xl']),\n  borderColor: PropTypes.string,\n  ...propTypes.borderRadius,\n  /** use 0 to remove border */\n  borderWidth: PropTypes.oneOf([0, 1, 2])\n}\n\nCard.defaultProps = {\n  theme,\n  borderColor: 'smoke',\n  borderRadius: 1,\n  borderWidth: 0\n}\n\nCard.displayName = 'Card'\n\nexport default Card\n"
  },
  {
    "path": "src/Container.js",
    "content": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\n\nconst Container = styled(Box)`\n  max-width: ${props => props.maxWidth}rem;\n`\n\nContainer.displayName = 'Container'\n\nContainer.propTypes = {\n  maxWidth: PropTypes.number\n}\n\nContainer.defaultProps = {\n  width: 1,\n  maxWidth: 72,\n  mx: 'auto'\n}\n\nexport default Container\n"
  },
  {
    "path": "src/Field.js",
    "content": "import React from 'react'\nimport Label from './Label'\nimport Flex from './Flex'\nimport Text from './Text'\nimport Input, { InputSelect, InputTextarea } from './Input'\nimport Slider from './Slider'\nimport PropTypes from 'prop-types'\nimport styled from 'styled-components'\nimport theme from './theme'\n\nexport const Error = styled(Text).attrs({\n  className: 'error',\n  color: 'error',\n  fontSize: 1,\n  ml: 1,\n  my: 0\n})`\n  font-weight: normal;\n  &:before {\n    content: '— ';\n  }\n`\n\nconst Field = ({ type, name, label, placeholder, error, ...props }) => {\n  const Component =\n    {\n      select: InputSelect,\n      slider: Slider,\n      textarea: InputTextarea\n    }[type] || Input\n  return (\n    <Label className={type} id={name} mb={2}>\n      <Flex align=\"center\" mb=\"2px\" wrap>\n        {label}\n        {error && <Error children={error} />}\n      </Flex>\n      <Component name={name} type={type} placeholder={placeholder} {...props} />\n    </Label>\n  )\n}\n\nField.displayName = 'Field'\n\nField.propTypes = {\n  /** choose alternate field type (like email, password, textarea, or select) */\n  type: PropTypes.oneOf([\n    'checkbox',\n    'date',\n    'email',\n    'file',\n    'number',\n    'password',\n    'select',\n    'tel',\n    'textarea',\n    'url',\n    'text'\n  ]),\n  name: PropTypes.string.isRequired,\n  /** label text */\n  label: PropTypes.string.isRequired,\n  /** validation message */\n  error: PropTypes.string,\n  /** placeholder text */\n  placeholder: PropTypes.string\n}\n\nField.defaultProps = {\n  theme,\n  type: 'text'\n}\n\nexport default Field\n"
  },
  {
    "path": "src/Flex.js",
    "content": "import styled from 'styled-components'\nimport {\n  alignSelf,\n  alignItems,\n  justifyContent,\n  flexDirection,\n  flex,\n  propTypes\n} from 'styled-system'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\n\nconst wrap = props => (props.wrap ? { flexWrap: 'wrap' } : null)\n\nconst Flex = styled(Box)`\n  display: flex;\n  ${alignSelf} ${alignItems} ${justifyContent} ${wrap} ${flexDirection} ${flex};\n`\n\nFlex.propTypes = {\n  wrap: PropTypes.bool,\n  ...propTypes.alignSelf,\n  ...propTypes.alignItems,\n  ...propTypes.justifyContent,\n  ...propTypes.flexDirection,\n  ...propTypes.flex\n}\n\nFlex.displayName = 'Flex'\n\nexport default Flex\n"
  },
  {
    "path": "src/Heading.js",
    "content": "import styled from 'styled-components'\nimport Text from './Text'\nimport theme from './theme'\n\nconst Heading = Text.withComponent('h2').extend`\n  line-height: 1.25;\n`\n\nHeading.displayName = 'Heading'\n\nHeading.defaultProps = {\n  theme,\n  regular: true,\n  fontSize: 5,\n  m: 0\n}\n\nHeading.h1 = styled(Heading.withComponent('h1'))``\nHeading.h1.defaultProps = {\n  bold: true,\n  fontSize: 6,\n  m: 0\n}\n\nHeading.h2 = Heading.withComponent('h2')\nHeading.h2.defaultProps = {\n  bold: true,\n  fontSize: 5,\n  m: 0\n}\n\nHeading.h3 = Heading.withComponent('h3')\nHeading.h3.defaultProps = {\n  bold: true,\n  fontSize: 4,\n  m: 0\n}\n\nHeading.h4 = Heading.withComponent('h4')\nHeading.h4.defaultProps = {\n  regular: true,\n  fontSize: 3,\n  m: 0\n}\n\nHeading.h5 = Heading.withComponent('h5')\nHeading.h5.defaultProps = {\n  bold: true,\n  fontSize: 2,\n  m: 0\n}\n\nHeading.h6 = Heading.withComponent('h6')\nHeading.h6.defaultProps = {\n  bold: true,\n  caps: true,\n  fontSize: 0,\n  m: 0\n}\n\nexport default Heading\n"
  },
  {
    "path": "src/Hide.js",
    "content": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\n\nconst mw = em => em - 0.01\n\nconst breakpoints = props => ({\n  xs: `@media screen and (max-width: ${mw(props.theme.breakpoints[0])}em)`,\n  sm: `@media screen and (min-width: ${\n    props.theme.breakpoints[0]\n  }em) and (max-width: ${mw(props.theme.breakpoints[1])}em)`,\n  md: `@media screen and (min-width: ${\n    props.theme.breakpoints[1]\n  }em) and (max-width: ${mw(props.theme.breakpoints[2])}em)`,\n  lg: `@media screen and (min-width: ${\n    props.theme.breakpoints[2]\n  }em) and (max-width: ${mw(props.theme.breakpoints[3])}em)`,\n  xl: `@media screen and (min-width: ${props.theme.breakpoints[3]}em)`\n})\n\nconst hidden = key => props =>\n  props[key] ? { [breakpoints(props)[key]]: { display: 'none' } } : null\n\nconst Hide = styled(Box)(\n  [],\n  hidden('xs'),\n  hidden('sm'),\n  hidden('md'),\n  hidden('lg'),\n  hidden('xl')\n)\n\nHide.displayName = 'Hide'\n\nHide.propTypes = {\n  xs: PropTypes.bool,\n  sm: PropTypes.bool,\n  md: PropTypes.bool,\n  lg: PropTypes.bool,\n  xl: PropTypes.bool\n}\n\nHide.defaultProps = {\n  theme\n}\n\nexport default Hide\n"
  },
  {
    "path": "src/Icon.js",
    "content": "import styled from 'styled-components'\nimport PropTypes from 'prop-types'\nimport Box from './Box'\nimport HCIcon from '@hackclub/icons'\n\nconst Icon = styled(Box.withComponent(HCIcon))`\n  flex: none;\n`\n\nIcon.displayName = 'Icon'\n\nIcon.propTypes = {\n  /** which icon to draw */\n  glyph: PropTypes.string,\n  /** width/height, numbers in px */\n  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])\n}\n\nIcon.defaultProps = {\n  glyph: 'flag',\n  size: 24\n}\n\nexport default Icon\n"
  },
  {
    "path": "src/IconButton.js",
    "content": "import React from 'react'\nimport styled, { css } from 'styled-components'\nimport Icon from './Icon'\nimport Button from './Button'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\n\nconst Base = styled(Button.button)`\n  box-shadow: none !important;\n  line-height: 0 !important;\n  ${props =>\n    props.circle &&\n    css`\n      padding: ${props.theme.space[props.p || 2]}px;\n    `};\n`\n\nconst IconButton = ({ glyph, size, color, ...props }) => (\n  <Base\n    children={<Icon glyph={glyph} size={size} color={color} />}\n    {...props}\n  />\n)\n\nIconButton.displayName = 'IconButton'\n\nIconButton.propTypes = {\n  glyph: PropTypes.string,\n  onClick: PropTypes.func,\n  circle: PropTypes.bool\n}\n\nIconButton.defaultProps = {\n  theme,\n  glyph: 'flag',\n  bg: 'transparent',\n  circle: false\n}\n\nexport default IconButton\n"
  },
  {
    "path": "src/Image.js",
    "content": "import styled from 'styled-components'\nimport Box from './Box'\nimport PropTypes from 'prop-types'\n\nconst Image = styled(Box.withComponent('img'))`\n  display: block;\n  max-width: 100%;\n  height: auto;\n`\n\nImage.displayName = 'Image'\n\nImage.propTypes = {\n  alt: PropTypes.string.isRequired\n}\n\nexport default Image\n"
  },
  {
    "path": "src/Input.js",
    "content": "import React from 'react'\nimport styled from 'styled-components'\nimport { fontSize, space, width, color, propTypes } from 'styled-system'\nimport theme from './theme'\nimport PropTypes from 'prop-types'\n\nconst chevron = () => {\n  const props = `xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'`\n  const slate = '%23' + theme.colors.slate.replace('#', '')\n  const pathProps = `fill='${slate}' d='M2 0L0 2h4zm0 5L0 3h4z'`\n  return `%3Csvg ${props}%3E%3Cpath ${pathProps}/%3E%3C/svg%3E`\n}\n\nconst Input = styled.input`\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: ${({ theme }) => theme.radius};\n  border-width: 1px;\n  border-style: solid;\n  border-color: ${({ theme }) => theme.colors.smoke};\n  transition: ${({ theme }) => theme.transition} box-shadow;\n\n  ::placeholder {\n    color: ${({ theme }) => theme.colors.grey};\n  }\n\n  ::-ms-clear {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ${({ theme }) => theme.colors.info};\n    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.blue[2]};\n  }\n\n  &[type='select'] {\n    background: #fff url(\"data:image/svg+xml;charset=utf8,${chevron()}\") no-repeat right .75rem center;\n    background-size: .5rem;\n  }\n\n  &[type='textarea'] {\n    resize: vertical;\n  }\n\n  ${fontSize} ${space} ${width} ${color};\n`\n\nInput.displayName = 'Input'\n\nInput.propTypes = {\n  id: PropTypes.string,\n  ...propTypes.fontSize,\n  ...propTypes.space,\n  ...propTypes.width,\n  ...propTypes.color\n}\n\nInput.defaultProps = {\n  theme,\n  width: 1,\n  m: 0,\n  py: 1,\n  px: 2,\n  fontSize: 2,\n  color: 'inherit',\n  bg: 'transparent'\n}\n\nexport const InputSelect = Input.withComponent('select')\nexport const InputTextarea = Input.withComponent('textarea')\n\nexport default Input\n"
  },
  {
    "path": "src/Label.js",
    "content": "import styled from 'styled-components'\nimport Text from './Text'\nimport { propTypes } from 'styled-system'\nimport theme from './theme'\n\nconst Label = styled(Text.withComponent('label'))`\n  display: block;\n\n  a {\n    color: ${({ theme }) => theme.colors.info};\n    text-decoration: underline;\n  }\n`\n\nLabel.displayName = 'Label'\n\nLabel.propTypes = {\n  ...propTypes.width\n}\n\nLabel.defaultProps = {\n  theme,\n  color: 'black',\n  fontSize: 2,\n  width: 1\n}\n\nexport default Label\n"
  },
  {
    "path": "src/LargeButton.js",
    "content": "import Button from './Button'\nimport theme, { hexa } from './theme'\n\nconst LargeButton = Button.extend`\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px ${({ theme }) => theme.shadowColor};\n\n  &:hover,\n  &:focus {\n    box-shadow: 0 2px 12px 2px\n      ${props =>\n        props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};\n  }\n\n  &:active {\n    box-shadow: 0 4px 16px 2px\n      ${props =>\n        props.inverted ? props.theme.shadowColor : hexa(props.bg, 0.25)};\n  }\n`\n\nLargeButton.displayName = 'LargeButton'\n\nLargeButton.defaultProps = {\n  theme,\n  bg: 'primary',\n  color: 'white',\n  fontSize: 3,\n  m: 0,\n  py: 3,\n  px: 4\n}\n\nLargeButton.button = LargeButton.withComponent('button')\nLargeButton.input = LargeButton.withComponent('input')\n\nexport default LargeButton\n"
  },
  {
    "path": "src/Link.js",
    "content": "import Text from './Text'\nimport PropTypes from 'prop-types'\nimport { css } from 'styled-components'\nimport theme from './theme'\n\nconst Link = Text.withComponent('a').extend`\n  text-decoration: ${props => (props.underline ? 'underline' : 'none')};\n\n  ${props =>\n    props.hoverline &&\n    css`\n      &:focus,\n      &:hover {\n        text-decoration: underline;\n      }\n    `};\n\n  &:before,\n  &:after {\n    text-decoration: none !important;\n    display: inline-block;\n  }\n  ${props =>\n    props.chevronLeft &&\n    css`\n      &:before {\n        content: '‹';\n        padding-right: 0.25em;\n      }\n    `};\n  ${props =>\n    props.chevronRight &&\n    css`\n      &:after {\n        content: '›';\n        padding-left: 0.25em;\n      }\n    `};\n`\n\nLink.displayName = 'Link'\n\nLink.propTypes = {\n  /** you know, where the link goes */\n  href: PropTypes.string,\n  /** enable text-decoration: underline */\n  underline: PropTypes.bool,\n  /** enable text-decoration: underline on hover*/\n  hoverline: PropTypes.bool,\n  /** add left text arrows */\n  chevronLeft: PropTypes.bool,\n  /** add right text arrows */\n  chevronRight: PropTypes.bool\n}\n\nLink.defaultProps = {\n  theme,\n  color: 'info'\n}\n\nexport default Link\n"
  },
  {
    "path": "src/Loading.js",
    "content": "import styled from 'styled-components'\nimport React from 'react'\nimport Box from './Box'\nimport { keyframes } from 'styled-components'\nimport theme from './theme'\n\nconst animation = keyframes`\n  0% {\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    width: 56px; // 64px - 3px border on two sides\n    height: 56px;\n    opacity: 0;\n  }\n`\n\nconst Base = styled(Box)`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n`\nconst Inner = styled(Box)`\n  position: absolute;\n  border: 4px solid currentColor;\n  opacity: 1;\n  border-radius: 50%;\n  transform-origin: center;\n  animation: ${animation} 0.975s ease-out infinite;\n`\n\nconst Loading = props => (\n  <Base role=\"presentation\" aria-label=\"Loading\" {...props}>\n    <Inner />\n    <Inner />\n  </Base>\n)\n\nLoading.defaultProps = {\n  theme,\n  color: 'primary'\n}\n\nexport default Loading\n"
  },
  {
    "path": "src/OutlineButton.js",
    "content": "import LargeButton from './LargeButton'\nimport theme, { cx } from './theme'\n\nconst OutlineButton = LargeButton.extend`\n  background: transparent;\n  border-width: 2px;\n  border-style: solid;\n  border-color: ${props => cx(props.bg)};\n  box-shadow: none;\n  color: ${props => cx(props.bg)};\n  &:focus:enabled,\n  &:hover:enabled {\n    background: ${props => cx(props.bg)};\n    color: ${props => cx(props.color)};\n    transition: ${({ theme }) => theme.transition} background,\n      ${({ theme }) => theme.transition} color;\n  }\n`\n\nOutlineButton.displayName = 'OutlineButton'\n\nOutlineButton.defaultProps = {\n  theme,\n  bg: 'primary',\n  color: 'white',\n  fontSize: 3,\n  py: theme.space[3] - 2,\n  px: theme.space[4] - 2,\n  m: 0\n}\n\nexport default OutlineButton\n"
  },
  {
    "path": "src/Section.js",
    "content": "import styled from 'styled-components'\nimport Flex from './Flex'\nimport theme from './theme'\n\nconst Section = styled(Flex)`\n  text-align: center;\n`\n\nSection.displayName = 'Section'\n\nSection.defaultProps = {\n  theme,\n  align: 'center',\n  justify: 'center',\n  flexDirection: 'column',\n  color: 'white',\n  py: [4, 5],\n  px: 3\n}\n\nexport default Section\n"
  },
  {
    "path": "src/Sheet.js",
    "content": "import styled from 'styled-components'\nimport Card from './Card'\nimport Container from './Container'\nimport theme from './theme'\n\nconst Sheet = styled(Card.withComponent(Container))`\n  position: relative;\n  overflow: hidden;\n  border-radius: ${theme.radii[2]};\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.0625);\n`\n\nSheet.displayName = 'Sheet'\n\nSheet.defaultProps = {\n  theme,\n  bg: 'rgba(255, 255, 255, 0.875)',\n  p: [3, 4]\n}\n\nexport default Sheet\n"
  },
  {
    "path": "src/Slider.js",
    "content": "import styled from 'styled-components'\nimport { space, width, color, propTypes } from 'styled-system'\nimport theme from './theme'\n\nconst Slider = styled.input.attrs({ type: 'range' })`\n  appearance: none;\n  display: block;\n  border-radius: ${({ theme }) => theme.pill};\n  height: 4px;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    width: 16px;\n    height: 16px;\n    background-color: currentColor;\n    border: 0;\n    border-radius: ${({ theme }) => theme.pill};\n    appearance: none;\n  }\n\n  ${space} ${width} ${color};\n`\n\nSlider.displayName = 'Input'\n\nSlider.propTypes = {\n  ...propTypes.space,\n  ...propTypes.width,\n  ...propTypes.color\n}\n\nSlider.defaultProps = {\n  theme,\n  width: 1,\n  bg: 'smoke',\n  color: 'primary'\n}\n\nexport default Slider\n"
  },
  {
    "path": "src/Submit.js",
    "content": "import styled from 'styled-components'\nimport Button from './Button'\nimport LargeButton from './LargeButton'\nimport { caps } from './Text'\nimport theme from './theme'\n\nconst Submit = styled(Button.input).attrs({\n  type: 'submit'\n})([], caps)\n\nSubmit.lg = styled(LargeButton.input).attrs({\n  type: 'submit'\n})([], caps)\n\nconst attrs = {\n  theme,\n  caps: true\n}\n\nSubmit.defaultProps = attrs\nSubmit.lg.defaultProps = attrs\n\nexport default Submit\n"
  },
  {
    "path": "src/Text.js",
    "content": "import React from 'react'\nimport styled from 'styled-components'\nimport PropTypes from 'prop-types'\nimport {\n  fontSize,\n  fontWeight,\n  textAlign,\n  space,\n  color,\n  propTypes\n} from 'styled-system'\nimport theme from './theme'\n\nexport const caps = props => props.caps && { textTransform: 'uppercase' }\n\nexport const regular = props => props.regular && { fontWeight: 'regular' }\n\nexport const bold = props => props.bold && { fontWeight: 'bold' }\n\nexport const maxWidth = ({ maxWidth }) =>\n  maxWidth && { maxWidth: `${maxWidth}rem` }\n\nconst Text = styled.p(\n  [],\n  fontSize,\n  space,\n  color,\n  caps,\n  textAlign,\n  bold,\n  regular,\n  fontWeight,\n  maxWidth\n)\n\nText.displayName = 'Text'\n\nText.propTypes = {\n  caps: PropTypes.bool,\n  regular: PropTypes.bool,\n  bold: PropTypes.bool,\n  maxWidth: PropTypes.number,\n  ...propTypes.fontSize,\n  ...propTypes.fontWeight,\n  ...propTypes.textAlign,\n  ...propTypes.space,\n  ...propTypes.color\n}\n\nText.defaultProps = {\n  theme,\n  m: 0\n}\n\nText.span = Text.withComponent('span')\nText.p = Text.withComponent('p')\nText.s = Text.withComponent('s')\n\nexport default Text\n"
  },
  {
    "path": "src/ThemeProvider.js",
    "content": "import React, { Fragment } from 'react'\nimport { ThemeProvider as Root, injectGlobal, css } from 'styled-components'\nimport PropTypes from 'prop-types'\nimport theme from './theme'\n\nconst fontsCss = css`\n  @font-face {\n    font-family: 'Phantom Sans';\n    src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff')\n        format('woff'),\n      url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2')\n        format('woff2');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Phantom Sans';\n    src: url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff')\n        format('woff'),\n      url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2')\n        format('woff2');\n    font-weight: bold;\n    font-style: normal;\n    font-display: swap;\n  }\n`\n\ninjectGlobal`\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  html {\n    -ms-text-size-adjust: 100%;\n    -moz-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ${theme.fontSizes[2]}px;\n    font-family: ${theme.font};\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n\n  pre,\n  code,\n  kbd {\n    font-family: ${theme.mono};\n  }\n`\n\nconst ThemeProvider = ({ theme, webfonts, ...props }) => {\n  if (webfonts) injectGlobal([], fontsCss)\n  return (\n    <Root\n      theme={theme}\n      {...props}\n      children={<Fragment>{props.children}</Fragment>}\n    />\n  )\n}\n\nThemeProvider.propTypes = {\n  theme: PropTypes.object,\n  webfonts: PropTypes.bool\n}\n\nThemeProvider.defaultProps = {\n  theme,\n  webfonts: false\n}\n\nexport default ThemeProvider\n"
  },
  {
    "path": "src/__tests__/Avatar.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Avatar } from '..'\n\ndescribe('Avatar', () => {\n  test('renders', () => {\n    const json = renderer\n      .create(<Avatar src=\"https://hackclub.com/team/zach.png\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('width', '48px')\n  })\n\n  test('renders string width', () => {\n    const json = renderer\n      .create(<Avatar src=\"https://hackclub.com/team/zach.png\" size=\"10vw\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('width', '10vw')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/BackgroundImage.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { theme, BackgroundImage } from '..'\n\nconst props = {\n  src:\n    'https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max',\n  'aria-label': 'Wooden desk with tools and chair'\n}\n\ndescribe('BackgroundImage', () => {\n  test('renders', () => {\n    const json = renderer.create(<BackgroundImage {...props} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-image', `url(${props.src})`)\n  })\n\n  test('renders with height', () => {\n    const json = renderer\n      .create(<BackgroundImage height=\"256px\" {...props} />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('height', '256px')\n  })\n\n  test('scale', () => {\n    const json = renderer.create(<BackgroundImage scale {...props} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule(\n      'background-size',\n      `auto ${theme.scaleFactor * 100}%`\n    )\n    expect(json).toHaveStyleRule(\n      'background-size',\n      `auto ${(theme.scaleFactor + 1 / 16) * 100}%`,\n      { modifier: ':hover' }\n    )\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Badge.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Badge, theme } from '..'\n\ndescribe('Badge', () => {\n  test('renders', () => {\n    const json = renderer.create(<Badge />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('accepts custom bg and color', () => {\n    const json = renderer.create(<Badge bg=\"white\" color=\"accent\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', theme.colors.white)\n    expect(json).toHaveStyleRule('color', theme.colors.accent)\n  })\n})\n"
  },
  {
    "path": "src/__tests__/BlockLink.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { BlockLink } from '..'\n\ndescribe('BlockLink', () => {\n  test('renders', () => {\n    const json = renderer.create(<BlockLink>raw text</BlockLink>).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Box.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Box, theme } from '..'\n\ndescribe('Box', () => {\n  test('renders', () => {\n    const json = renderer.create(<Box />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('width prop sets width', () => {\n    const json = renderer.create(<Box width={1 / 2} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('width', '50%')\n  })\n\n  test('m prop sets margin', () => {\n    const json = renderer.create(<Box m={1} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('margin', theme.space[1] + 'px')\n  })\n\n  test('p prop sets padding', () => {\n    const json = renderer.create(<Box p={1} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('padding', theme.space[1] + 'px')\n  })\n\n  test('color prop sets color', () => {\n    const json = renderer.create(<Box color=\"warning\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('color', theme.colors.warning)\n  })\n\n  test('bg prop sets background color', () => {\n    const json = renderer.create(<Box bg=\"accent\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', theme.colors.accent)\n  })\n\n  test('bg prop sets custom background color', () => {\n    const json = renderer.create(<Box bg=\"#ff6d00\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', '#ff6d00')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Button.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Button, theme } from '..'\n\ndescribe('Button', () => {\n  test('renders', () => {\n    const json = renderer.create(<Button />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('custom bg', () => {\n    const json = renderer.create(<Button bg=\"accent\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', theme.colors.accent)\n    expect(json).toHaveStyleRule('color', theme.colors.white)\n  })\n\n  test('inverted', () => {\n    const json = renderer.create(<Button bg=\"accent\" inverted />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', theme.colors.white)\n    expect(json).toHaveStyleRule('color', theme.colors.accent)\n  })\n\n  test('scale', () => {\n    const json = renderer.create(<Button scale />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('will-change', 'transform')\n    expect(json).toHaveStyleRule('transform', 'scale(1)')\n    expect(json).toHaveStyleRule('transform', `scale(${theme.scaleFactor})`, {\n      modifier: ':hover'\n    })\n  })\n\n  test('disabled prop sets', () => {\n    const json = renderer.create(<Button disabled />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('opacity', '0.25')\n    expect(json).toHaveStyleRule('cursor', 'not-allowed')\n  })\n\n  test('without disabled prop sets', () => {\n    const json = renderer.create(<Button bg=\"success\" inverted />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('color', theme.colors.success)\n    expect(json).toHaveStyleRule(\n      'box-shadow',\n      `0 2px 6px ${theme.shadowColor}`,\n      { modifier: ':hover' }\n    )\n  })\n\n  test('left chevron', () => {\n    const json = renderer.create(<Button chevronLeft />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('content', `'«'`, { modifier: ':before' })\n  })\n\n  test('right chevron', () => {\n    const json = renderer.create(<Button chevronRight />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('content', `'»'`, { modifier: ':after' })\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Card.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Card, theme } from '..'\n\ndescribe('Card', () => {\n  test('renders small box shadow', () => {\n    const json = renderer.create(<Card boxShadowSize=\"sm\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('box-shadow', theme.boxShadows[0])\n    expect(json).toHaveStyleRule('border-radius', theme.radius)\n  })\n\n  test('renders lg shadow', () => {\n    const json = renderer.create(<Card boxShadowSize=\"lg\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('box-shadow', theme.boxShadows[2])\n  })\n\n  test('renders with 1px border', () => {\n    const json = renderer.create(<Card borderWidth={1} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('border', `1px solid ${theme.colors.smoke}`)\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Container.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Container } from '..'\n\ndescribe('Container', () => {\n  test('renders with default theme max-width', () => {\n    const json = renderer.create(<Container />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with maxWidth', () => {\n    const json = renderer.create(<Container maxWidth={32} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('max-width', '32rem')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Field.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Field } from '..'\n\ndescribe('Field', () => {\n  test('renders', () => {\n    const json = renderer\n      .create(<Field name=\"renders\" label=\"Renders\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('with error', () => {\n    const json = renderer\n      .create(<Field name=\"error\" label=\"Error\" error=\"error message\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Flex.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Flex } from '..'\n\ndescribe('Flex', () => {\n  test('renders', () => {\n    const flex = renderer.create(<Flex />).toJSON()\n    expect(flex).toMatchSnapshot()\n  })\n\n  test('align prop', () => {\n    const flex = renderer.create(<Flex align=\"center\" />).toJSON()\n    expect(flex).toMatchSnapshot()\n    expect(flex).toHaveStyleRule('align-items', 'center')\n  })\n\n  test('justify prop', () => {\n    const flex = renderer.create(<Flex justify=\"space-between\" />).toJSON()\n    expect(flex).toMatchSnapshot()\n    expect(flex).toHaveStyleRule('justify-content', 'space-between')\n  })\n\n  test('wrap prop', () => {\n    const flex = renderer.create(<Flex wrap />).toJSON()\n    expect(flex).toMatchSnapshot()\n    expect(flex).toHaveStyleRule('flex-wrap', 'wrap')\n  })\n\n  test('direction prop', () => {\n    const flex = renderer.create(<Flex flexDirection=\"column\" />).toJSON()\n    expect(flex).toMatchSnapshot()\n    expect(flex).toHaveStyleRule('flex-direction', 'column')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Heading.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Heading, theme } from '..'\n\ndescribe('Heading', () => {\n  test('renders', () => {\n    const json = renderer.create(<Heading />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  const dotNotationTestCase = 'with h1-h6 dot-notation'\n  test(dotNotationTestCase, () => {\n    const headingH1json = renderer.create(<Heading.h1 />).toJSON()\n    const headingH2json = renderer.create(<Heading.h2 />).toJSON()\n    const headingH3json = renderer.create(<Heading.h3 />).toJSON()\n    const headingH4json = renderer.create(<Heading.h4 />).toJSON()\n    const headingH5json = renderer.create(<Heading.h5 />).toJSON()\n    const headingH6json = renderer.create(<Heading.h6 />).toJSON()\n    expect(headingH1json).toMatchSnapshot()\n    expect(headingH2json).toMatchSnapshot()\n    expect(headingH3json).toMatchSnapshot()\n    expect(headingH4json).toMatchSnapshot()\n    expect(headingH5json).toMatchSnapshot()\n    expect(headingH6json).toMatchSnapshot()\n  })\n\n  const defaultFontSizeTestCase =\n    'with default theme font size, when fontSize prop not used'\n  test(defaultFontSizeTestCase, () => {\n    const json = renderer.create(<Heading />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('font-size', theme.fontSizes[5] + 'px')\n  })\n\n  const usingTextPropsTestCase = 'uses <Text> component properties'\n  test(usingTextPropsTestCase, () => {\n    const json = renderer\n      .create(<Heading align=\"center\" color=\"primary\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-align', 'center')\n    expect(json).toHaveStyleRule('color', theme.colors['primary'])\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Hide.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Hide } from '..'\n\ndescribe('Hide', () => {\n  test('renders', () => {\n    const json = renderer.create(<Hide />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with xs prop', () => {\n    const json = renderer.create(<Hide xs />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with sm prop', () => {\n    const json = renderer.create(<Hide sm />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with md prop', () => {\n    const json = renderer.create(<Hide md />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with lg prop', () => {\n    const json = renderer.create(<Hide lg />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with xl prop', () => {\n    const json = renderer.create(<Hide xl />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Icon.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Icon } from '..'\n\ndescribe('Icon', () => {\n  test('renders', () => {\n    const json = renderer.create(<Icon glyph=\"flag\" />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/IconButton.js",
    "content": "/* eslint-env jest */\n\nimport React from 'react'\nimport renderer from 'react-test-renderer'\nimport { shallow } from 'enzyme'\nimport { IconButton } from '..'\n\ndescribe('IconButton', () => {\n  test('renders', () => {\n    const json = renderer.create(<IconButton />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with circle prop', () => {\n    const json = renderer.create(<IconButton circle />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('border-radius', '9999px')\n    expect(json).toHaveStyleRule('padding', '12px')\n  })\n\n  test('executes onClick prop on click', () => {\n    const handleClick = jest.fn()\n    const wrapper = shallow(<IconButton onClick={handleClick} />)\n    wrapper.simulate('click')\n    expect(handleClick).toBeCalled()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Image.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Image } from '..'\n\nconst imageSrc = 'https://hackclub.com/social-photo_2.jpg'\n\ndescribe('Image', () => {\n  test('renders', () => {\n    const json = renderer\n      .create(<Image src={imageSrc} alt=\"Smiling students at a hackathon\" />)\n      .toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Input.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Input, theme } from '..'\n\ndescribe('Input', () => {\n  test('renders', () => {\n    const json = renderer.create(<Input id=\"renders\" />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders with custom spacing', () => {\n    const json = renderer.create(<Input p={4} m={4} id=\"space\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('padding', theme.space[4] + 'px')\n    expect(json).toHaveStyleRule('margin', theme.space[4] + 'px')\n  })\n\n  test('renders with custom fontSize', () => {\n    const json = renderer.create(<Input fontSize={4} id=\"fontSize\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('font-size', theme.fontSizes[4] + 'px')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Label.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Label } from '..'\n\ndescribe('Label', () => {\n  test('it renders', () => {\n    const json = renderer.create(<Label />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/LargeButton.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { LargeButton, theme } from '..'\n\ndescribe('LargeButton', () => {\n  test('renders', () => {\n    const json = renderer.create(<LargeButton />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('inverted', () => {\n    const json = renderer.create(<LargeButton inverted />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule(\n      'box-shadow',\n      `0 2px 12px ${theme.shadowColor}`\n    )\n    expect(json).toHaveStyleRule(\n      'box-shadow',\n      `0 2px 12px 2px ${theme.shadowColor}`,\n      {\n        modifier: ':hover'\n      }\n    )\n    expect(json).toHaveStyleRule(\n      'box-shadow',\n      `0 4px 16px 2px ${theme.shadowColor}`,\n      {\n        modifier: ':active'\n      }\n    )\n  })\n\n  test('larger', () => {\n    const json = renderer.create(<LargeButton bg=\"accent\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', theme.colors.accent)\n    expect(json).toHaveStyleRule('color', theme.colors.white)\n    expect(json).toHaveStyleRule('padding-left', theme.space[4] + 'px')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Link.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Link } from '..'\n\ndescribe('Link', () => {\n  test('renders', () => {\n    const json = renderer.create(<Link>Hello</Link>).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('renders underline', () => {\n    const json = renderer.create(<Link underline>Underline</Link>).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-decoration', 'underline')\n  })\n\n  test('renders hoverline', () => {\n    const json = renderer.create(<Link hoverline>Hoverline</Link>).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-decoration', 'none')\n    expect(json).toHaveStyleRule('text-decoration', 'underline', {\n      modifier: ':hover'\n    })\n  })\n\n  test('renders chevronleft', () => {\n    const json = renderer.create(<Link chevronLeft>Left</Link>).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('content', `'‹'`, { modifier: ':before' })\n  })\n\n  test('renders chevronright', () => {\n    const json = renderer.create(<Link chevronRight>Right</Link>).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('content', `'›'`, { modifier: ':after' })\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Loading.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Loading } from '..'\n\ndescribe('Loading', () => {\n  test('renders', () => {\n    const json = renderer.create(<Loading />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/OutlineButton.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { OutlineButton, theme } from '..'\n\ndescribe('OutlineButton', () => {\n  test('renders', () => {\n    const json = renderer.create(<OutlineButton />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('border-style', 'solid')\n    expect(json).toHaveStyleRule('background', 'transparent')\n  })\n\n  test('disabled prop sets', () => {\n    const json = renderer.create(<OutlineButton disabled />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('opacity', '0.25')\n  })\n\n  test('with custom color', () => {\n    const json = renderer.create(<OutlineButton bg=\"white\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('color', theme.colors.white)\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Section.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Section } from '..'\n\ndescribe('Section', () => {\n  test('renders', () => {\n    const json = renderer.create(<Section />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Sheet.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Sheet } from '..'\n\ndescribe('Sheet', () => {\n  test('renders', () => {\n    const json = renderer.create(<Sheet />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('background-color', 'rgba(255,255,255,0.875)')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Slider.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Slider, theme } from '..'\n\ndescribe('Slider', () => {\n  test('renders', () => {\n    const json = renderer.create(<Slider id=\"renders\" />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Submit.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Submit } from '..'\n\ndescribe('Submit', () => {\n  test('renders', () => {\n    const json = renderer.create(<Submit />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-transform', 'uppercase')\n  })\n\n  test('renders lg', () => {\n    const json = renderer.create(<Submit lg />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/Text.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Text, theme } from '..'\n\ndescribe('Text', () => {\n  test('renders', () => {\n    const json = renderer.create(<Text />).toJSON()\n    expect(json).toMatchSnapshot()\n  })\n\n  test('align prop sets text-align', () => {\n    const json = renderer.create(<Text align=\"center\" />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-align', 'center')\n  })\n\n  test('regular prop sets font-weight', () => {\n    const json = renderer.create(<Text regular />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('font-weight', 'regular')\n  })\n\n  test('bold prop sets font-weight', () => {\n    const json = renderer.create(<Text bold />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('font-weight', 'bold')\n  })\n\n  test('maxWidth prop sets max-width', () => {\n    const json = renderer.create(<Text maxWidth={48} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('max-width', '48rem')\n  })\n\n  test('caps prop sets text-transform', () => {\n    const json = renderer.create(<Text caps />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('text-transform', 'uppercase')\n  })\n\n  test('fontSize prop sets font-size', () => {\n    const f0 = renderer.create(<Text fontSize={0} />).toJSON()\n    const f1 = renderer.create(<Text fontSize={1} />).toJSON()\n    const f2 = renderer.create(<Text fontSize={2} />).toJSON()\n    const f3 = renderer.create(<Text fontSize={3} />).toJSON()\n    const f4 = renderer.create(<Text fontSize={4} />).toJSON()\n    const f5 = renderer.create(<Text fontSize={5} />).toJSON()\n    const f6 = renderer.create(<Text fontSize={6} />).toJSON()\n    expect(f0).toHaveStyleRule('font-size', theme.fontSizes[0] + 'px')\n    expect(f1).toHaveStyleRule('font-size', theme.fontSizes[1] + 'px')\n    expect(f2).toHaveStyleRule('font-size', theme.fontSizes[2] + 'px')\n    expect(f3).toHaveStyleRule('font-size', theme.fontSizes[3] + 'px')\n    expect(f4).toHaveStyleRule('font-size', theme.fontSizes[4] + 'px')\n    expect(f5).toHaveStyleRule('font-size', theme.fontSizes[5] + 'px')\n    expect(f6).toHaveStyleRule('font-size', theme.fontSizes[6] + 'px')\n  })\n\n  test('mt prop sets margin-top', () => {\n    const json = renderer.create(<Text mt={2} />).toJSON()\n    expect(json).toMatchSnapshot()\n    expect(json).toHaveStyleRule('margin-top', theme.space[2] + 'px')\n  })\n})\n"
  },
  {
    "path": "src/__tests__/ThemeProvider.js",
    "content": "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { ThemeProvider } from '..'\nimport styled from 'styled-components'\n\nconst Content = styled.p`\n  color: ${({ theme }) => theme.colors.primary};\n`\n\ndescribe('ThemeProvider', () => {\n  test('renders content with theme', () => {\n    const json = renderer.create(\n      <ThemeProvider>\n        <Content>Hello!</Content>\n      </ThemeProvider>\n    )\n    expect(json).toMatchSnapshot()\n  })\n})\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Avatar.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Avatar renders 1`] = `\n.c0 {\n  border-radius: 9999px;\n  display: inline-block;\n  width: 48px;\n  height: 48px;\n}\n\n<img\n  className=\"c0 \"\n  size={48}\n  src=\"https://hackclub.com/team/zach.png\"\n/>\n`;\n\nexports[`Avatar renders string width 1`] = `\n.c0 {\n  border-radius: 9999px;\n  display: inline-block;\n  width: 10vw;\n  height: 10vw;\n}\n\n<img\n  className=\"c0 \"\n  size=\"10vw\"\n  src=\"https://hackclub.com/team/zach.png\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/BackgroundImage.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BackgroundImage renders 1`] = `\n.c1 {\n  background-color: #dde1e4;\n}\n\n.c0 {\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);\n}\n\n<div\n  aria-label=\"Wooden desk with tools and chair\"\n  className=\"c0 c1\"\n  src=\"https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max\"\n/>\n`;\n\nexports[`BackgroundImage renders with height 1`] = `\n.c1 {\n  background-color: #dde1e4;\n}\n\n.c0 {\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);\n  height: 256px;\n}\n\n<div\n  aria-label=\"Wooden desk with tools and chair\"\n  className=\"c0 c1\"\n  height=\"256px\"\n  src=\"https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max\"\n/>\n`;\n\nexports[`BackgroundImage scale 1`] = `\n.c1 {\n  background-color: #dde1e4;\n}\n\n.c0 {\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-image: url(https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);\n  overflow: hidden;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background-size;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background-size;\n  will-change: background-size;\n  background-size: auto 106.25%;\n}\n\n.c0:hover {\n  background-size: auto 112.5%;\n}\n\n@media (prefers-reduced-motion:reduce) {\n  .c0 {\n    -webkit-transition: none;\n    transition: none;\n    background-size: cover !important;\n  }\n}\n\n<div\n  aria-label=\"Wooden desk with tools and chair\"\n  className=\"c0 c1\"\n  scale={true}\n  src=\"https://images.unsplash.com/photo-1416339684178-3a239570f315?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Badge.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Badge accepts custom bg and color 1`] = `\n.c1 {\n  font-size: 16px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  background-color: #ffffff;\n  color: #7280ed;\n}\n\n.c0 {\n  border-radius: 9999px;\n  display: inline-block;\n  font-weight: normal;\n  -webkit-letter-spacing: 0.0375em;\n  -moz-letter-spacing: 0.0375em;\n  -ms-letter-spacing: 0.0375em;\n  letter-spacing: 0.0375em;\n  line-height: 1.125;\n  text-transform: uppercase;\n}\n\n<span\n  className=\"c0 c1\"\n  color=\"accent\"\n  fontSize={1}\n/>\n`;\n\nexports[`Badge renders 1`] = `\n.c1 {\n  font-size: 16px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  background-color: #e42d42;\n  color: #ffffff;\n}\n\n.c0 {\n  border-radius: 9999px;\n  display: inline-block;\n  font-weight: normal;\n  -webkit-letter-spacing: 0.0375em;\n  -moz-letter-spacing: 0.0375em;\n  -ms-letter-spacing: 0.0375em;\n  letter-spacing: 0.0375em;\n  line-height: 1.125;\n  text-transform: uppercase;\n}\n\n<span\n  className=\"c0 c1\"\n  color=\"white\"\n  fontSize={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/BlockLink.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`BlockLink renders 1`] = `\n.c1 {\n  margin: 0px;\n  color: inherit;\n}\n\n.c0 {\n  display: block;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n<a\n  className=\"c0 c1\"\n  color=\"inherit\"\n>\n  raw text\n</a>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Box.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Box bg prop sets background color 1`] = `\n.c0 {\n  background-color: #7280ed;\n}\n\n<div\n  className=\"c0\"\n/>\n`;\n\nexports[`Box bg prop sets custom background color 1`] = `\n.c0 {\n  background-color: #ff6d00;\n}\n\n<div\n  className=\"c0\"\n/>\n`;\n\nexports[`Box color prop sets color 1`] = `\n.c0 {\n  color: #e4732d;\n}\n\n<div\n  className=\"c0\"\n  color=\"warning\"\n/>\n`;\n\nexports[`Box m prop sets margin 1`] = `\n.c0 {\n  margin: 6px;\n}\n\n<div\n  className=\"c0\"\n/>\n`;\n\nexports[`Box p prop sets padding 1`] = `\n.c0 {\n  padding: 6px;\n}\n\n<div\n  className=\"c0\"\n/>\n`;\n\nexports[`Box renders 1`] = `\n<div\n  className=\"\"\n/>\n`;\n\nexports[`Box width prop sets width 1`] = `\n.c0 {\n  width: 50%;\n}\n\n<div\n  className=\"c0\"\n  width={0.5}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Button.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button custom bg 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #7280ed;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(114,128,237,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(114,128,237,0.25);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`Button disabled prop sets 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  opacity: 0.25;\n  cursor: not-allowed;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  disabled={true}\n  fontSize={3}\n/>\n`;\n\nexports[`Button inverted 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #7280ed;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  background-color: #ffffff;\n  color: #7280ed;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.125);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`Button left chevron 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:before {\n  content: '«';\n  padding-right: 0.25em;\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`Button renders 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`Button right chevron 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:after {\n  content: '»';\n  padding-left: 0.25em;\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`Button scale 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) all;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) all;\n  will-change: transform;\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  transform: scale(1);\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  -webkit-transform: scale(1.0625);\n  -ms-transform: scale(1.0625);\n  transform: scale(1.0625);\n}\n\n@media (prefers-reduced-motion:reduce) {\n  .c0 {\n    -webkit-transform: none;\n    -ms-transform: none;\n    transform: none;\n  }\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n  scale={true}\n/>\n`;\n\nexports[`Button without disabled prop sets 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #2de473;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  background-color: #ffffff;\n  color: #2de473;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.125);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Card.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Card renders lg shadow 1`] = `\n.c0 {\n  box-shadow: 0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125);\n  border-radius: 4px;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Card renders small box shadow 1`] = `\n.c0 {\n  box-shadow: 0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125);\n  border-radius: 4px;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Card renders with 1px border 1`] = `\n.c0 {\n  border: 1px solid #dde1e4;\n  border-radius: 4px;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Container.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Container renders with default theme max-width 1`] = `\n.c1 {\n  margin-left: auto;\n  margin-right: auto;\n  width: 100%;\n}\n\n.c0 {\n  max-width: 72rem;\n}\n\n<div\n  className=\"c0 c1\"\n  width={1}\n/>\n`;\n\nexports[`Container renders with maxWidth 1`] = `\n.c1 {\n  margin-left: auto;\n  margin-right: auto;\n  width: 100%;\n}\n\n.c0 {\n  max-width: 32rem;\n}\n\n<div\n  className=\"c0 c1\"\n  width={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Field.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Field renders 1`] = `\n.c3 {\n  margin-bottom: 2px;\n  text-align: center;\n}\n\n.c1 {\n  font-size: 18px;\n  margin: 0px;\n  margin-bottom: 12px;\n  color: #384046;\n}\n\n.c0 {\n  display: block;\n}\n\n.c0 a {\n  color: #2d9ee4;\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n\n.c2 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-flex-wrap: wrap;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n}\n\n.c4 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dde1e4;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  font-size: 18px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  width: 100%;\n  color: inherit;\n  background-color: transparent;\n}\n\n.c4::-ms-clear {\n  display: none;\n}\n\n.c4::-ms-clear {\n  display: none;\n}\n\n.c4::-ms-clear {\n  display: none;\n}\n\n.c4::-ms-clear {\n  display: none;\n}\n\n.c4:focus {\n  outline: none;\n  border-color: #2d9ee4;\n  box-shadow: 0 0 0 2px #add9f5;\n}\n\n.c4[type='select'] {\n  background: #fff url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;\n  background-size: .5rem;\n}\n\n.c4[type='textarea'] {\n  resize: vertical;\n}\n\n<label\n  className=\"text c0 c1\"\n  color=\"black\"\n  fontSize={2}\n  id=\"renders\"\n  width={1}\n>\n  <div\n    className=\"c2 c3\"\n    wrap={true}\n  >\n    Renders\n  </div>\n  <input\n    className=\"c4\"\n    color=\"inherit\"\n    fontSize={2}\n    name=\"renders\"\n    type=\"text\"\n    width={1}\n  />\n</label>\n`;\n\nexports[`Field with error 1`] = `\n.c3 {\n  margin-bottom: 2px;\n  text-align: center;\n}\n\n.c5 {\n  font-size: 16px;\n  margin: 0px;\n  margin-left: 6px;\n  margin-top: 0px;\n  margin-bottom: 0px;\n  color: #b52434;\n}\n\n.c1 {\n  font-size: 18px;\n  margin: 0px;\n  margin-bottom: 12px;\n  color: #384046;\n}\n\n.c0 {\n  display: block;\n}\n\n.c0 a {\n  color: #2d9ee4;\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n\n.c2 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-flex-wrap: wrap;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n}\n\n.c6 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dde1e4;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  font-size: 18px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  width: 100%;\n  color: inherit;\n  background-color: transparent;\n}\n\n.c6::-ms-clear {\n  display: none;\n}\n\n.c6::-ms-clear {\n  display: none;\n}\n\n.c6::-ms-clear {\n  display: none;\n}\n\n.c6::-ms-clear {\n  display: none;\n}\n\n.c6:focus {\n  outline: none;\n  border-color: #2d9ee4;\n  box-shadow: 0 0 0 2px #add9f5;\n}\n\n.c6[type='select'] {\n  background: #fff url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;\n  background-size: .5rem;\n}\n\n.c6[type='textarea'] {\n  resize: vertical;\n}\n\n.c4 {\n  font-weight: normal;\n}\n\n.c4:before {\n  content: '— ';\n}\n\n<label\n  className=\"text c0 c1\"\n  color=\"black\"\n  fontSize={2}\n  id=\"error\"\n  width={1}\n>\n  <div\n    className=\"c2 c3\"\n    wrap={true}\n  >\n    Error\n    <p\n      className=\"error c4 c5\"\n      color=\"error\"\n      fontSize={1}\n    >\n      error message\n    </p>\n  </div>\n  <input\n    className=\"c6\"\n    color=\"inherit\"\n    fontSize={2}\n    name=\"error\"\n    type=\"text\"\n    width={1}\n  />\n</label>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Flex.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Flex align prop 1`] = `\n.c1 {\n  text-align: center;\n}\n\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n<div\n  className=\"c0 c1\"\n/>\n`;\n\nexports[`Flex direction prop 1`] = `\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-flex-direction: column;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Flex justify prop 1`] = `\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: justify;\n  -webkit-justify-content: space-between;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Flex renders 1`] = `\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Flex wrap prop 1`] = `\n.c0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-flex-wrap: wrap;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n}\n\n<div\n  className=\"c0 \"\n  wrap={true}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Heading.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Heading renders 1`] = `\n.c0 {\n  font-size: 36px;\n  margin: 0px;\n  font-weight: regular;\n  line-height: 1.25;\n}\n\n<h2\n  className=\"c0\"\n  fontSize={5}\n/>\n`;\n\nexports[`Heading uses <Text> component properties 1`] = `\n.c0 {\n  font-size: 36px;\n  margin: 0px;\n  color: #e42d42;\n  text-align: center;\n  font-weight: regular;\n  line-height: 1.25;\n}\n\n<h2\n  className=\"c0\"\n  color=\"primary\"\n  fontSize={5}\n/>\n`;\n\nexports[`Heading with default theme font size, when fontSize prop not used 1`] = `\n.c0 {\n  font-size: 36px;\n  margin: 0px;\n  font-weight: regular;\n  line-height: 1.25;\n}\n\n<h2\n  className=\"c0\"\n  fontSize={5}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 1`] = `\n.c0 {\n  font-size: 48px;\n  margin: 0px;\n  font-weight: bold;\n  font-weight: regular;\n  line-height: 1.25;\n}\n\n<h1\n  className=\"c0\"\n  fontSize={6}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 2`] = `\n.c0 {\n  font-size: 32px;\n  margin: 0px;\n  font-weight: bold;\n  line-height: 1.25;\n}\n\n<h2\n  className=\"c0\"\n  fontSize={5}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 3`] = `\n.c0 {\n  font-size: 24px;\n  margin: 0px;\n  font-weight: bold;\n  line-height: 1.25;\n}\n\n<h3\n  className=\"c0\"\n  fontSize={4}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 4`] = `\n.c0 {\n  font-size: 20px;\n  margin: 0px;\n  font-weight: regular;\n  line-height: 1.25;\n}\n\n<h4\n  className=\"c0\"\n  fontSize={3}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 5`] = `\n.c0 {\n  font-size: 16px;\n  margin: 0px;\n  font-weight: bold;\n  line-height: 1.25;\n}\n\n<h5\n  className=\"c0\"\n  fontSize={2}\n/>\n`;\n\nexports[`Heading with h1-h6 dot-notation 6`] = `\n.c0 {\n  font-size: 12px;\n  margin: 0px;\n  text-transform: uppercase;\n  font-weight: bold;\n  line-height: 1.25;\n}\n\n<h6\n  className=\"c0\"\n  fontSize={0}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Hide.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Hide renders 1`] = `\n<div\n  className=\"\"\n/>\n`;\n\nexports[`Hide renders with lg prop 1`] = `\n@media screen and (min-width:64em) and (max-width:79.99em) {\n  .c0 {\n    display: none;\n  }\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Hide renders with md prop 1`] = `\n@media screen and (min-width:48em) and (max-width:63.99em) {\n  .c0 {\n    display: none;\n  }\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Hide renders with sm prop 1`] = `\n@media screen and (min-width:32em) and (max-width:47.99em) {\n  .c0 {\n    display: none;\n  }\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Hide renders with xl prop 1`] = `\n@media screen and (min-width:80em) {\n  .c0 {\n    display: none;\n  }\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n\nexports[`Hide renders with xs prop 1`] = `\n@media screen and (max-width:31.99em) {\n  .c0 {\n    display: none;\n  }\n}\n\n<div\n  className=\"c0 \"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Icon.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Icon renders 1`] = `\n.c0 {\n  -webkit-flex: none;\n  -ms-flex: none;\n  flex: none;\n}\n\n<svg\n  aria-label=\"flag\"\n  className=\"c0 \"\n  clipRule=\"evenodd\"\n  fill=\"currentColor\"\n  fillRule=\"evenodd\"\n  height={24}\n  preserveAspectRatio=\"xMidYMid meet\"\n  strokeLinejoin=\"round\"\n  strokeMiterlimit=\"1.414\"\n  theme={\n    Object {\n      \"bold\": \"bold\",\n      \"boxShadows\": Array [\n        \"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)\",\n        \"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)\",\n        \"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)\",\n        \"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)\",\n      ],\n      \"breakpoints\": Array [\n        32,\n        48,\n        64,\n        80,\n      ],\n      \"colors\": Object {\n        \"accent\": \"#7280ed\",\n        \"base\": \"#2d9ce4\",\n        \"black\": \"#384046\",\n        \"blue\": Array [\n          \"#e6f4fc\",\n          \"#cce7f8\",\n          \"#add9f5\",\n          \"#8bc9f0\",\n          \"#62b6eb\",\n          \"#2d9ee4\",\n          \"#298fce\",\n          \"#247db4\",\n          \"#1d6795\",\n          \"#154a6b\",\n        ],\n        \"cyan\": Array [\n          \"#e7fcfa\",\n          \"#ccf9f3\",\n          \"#aff5ed\",\n          \"#8cf0e5\",\n          \"#63ebdb\",\n          \"#2de4cf\",\n          \"#29cebb\",\n          \"#24b5a5\",\n          \"#1e9789\",\n          \"#166d63\",\n        ],\n        \"dark\": \"#17171d\",\n        \"darker\": \"#121217\",\n        \"error\": \"#b52434\",\n        \"fuschia\": Array [\n          \"#faebfc\",\n          \"#f5d4fa\",\n          \"#efbaf6\",\n          \"#e89bf2\",\n          \"#df73ed\",\n          \"#cf2de4\",\n          \"#bb29ce\",\n          \"#a424b5\",\n          \"#881d95\",\n          \"#61156b\",\n        ],\n        \"gray\": Array [\n          \"#f9f9fa\",\n          \"#ebeeef\",\n          \"#dde1e4\",\n          \"#cdd4d8\",\n          \"#bcc5cb\",\n          \"#a9b5bc\",\n          \"#93a2ab\",\n          \"#7a8c97\",\n          \"#606e77\",\n          \"#384046\",\n        ],\n        \"green\": Array [\n          \"#eafce7\",\n          \"#d2f9cd\",\n          \"#b7f5b0\",\n          \"#99f08d\",\n          \"#73eb64\",\n          \"#42e42d\",\n          \"#3cce29\",\n          \"#35b524\",\n          \"#2c971e\",\n          \"#206d16\",\n        ],\n        \"indigo\": Array [\n          \"#ebedfc\",\n          \"#d4d8f9\",\n          \"#bac1f6\",\n          \"#9aa4f2\",\n          \"#7280ed\",\n          \"#2d42e4\",\n          \"#283bcd\",\n          \"#2334b3\",\n          \"#1d2a92\",\n          \"#141e66\",\n        ],\n        \"info\": \"#2d9ee4\",\n        \"lime\": Array [\n          \"#f2fbe4\",\n          \"#e5f8c6\",\n          \"#d6f4a6\",\n          \"#c6ef83\",\n          \"#b3ea5b\",\n          \"#9ee42d\",\n          \"#8fce29\",\n          \"#7eb524\",\n          \"#69971e\",\n          \"#4c6d16\",\n        ],\n        \"muted\": \"#7a8c97\",\n        \"orange\": Array [\n          \"#fcefe7\",\n          \"#f9ddcc\",\n          \"#f5caaf\",\n          \"#f0b38d\",\n          \"#eb9763\",\n          \"#e4732d\",\n          \"#ce6829\",\n          \"#b45b24\",\n          \"#954b1d\",\n          \"#6b3615\",\n        ],\n        \"pink\": Array [\n          \"#fcebf6\",\n          \"#fad5eb\",\n          \"#f6bbdf\",\n          \"#f29cd1\",\n          \"#ed73be\",\n          \"#e42d9e\",\n          \"#ce298f\",\n          \"#b5247d\",\n          \"#961e68\",\n          \"#6b154a\",\n        ],\n        \"primary\": \"#e42d42\",\n        \"red\": Array [\n          \"#fcebed\",\n          \"#fad5d9\",\n          \"#f6bcc2\",\n          \"#f29da7\",\n          \"#ed7582\",\n          \"#e42d42\",\n          \"#ce293c\",\n          \"#b52434\",\n          \"#951d2b\",\n          \"#6b151f\",\n        ],\n        \"silver\": \"#7a8c97\",\n        \"slate\": \"#606e77\",\n        \"smoke\": \"#dde1e4\",\n        \"snow\": \"#f9f9fa\",\n        \"success\": \"#2de473\",\n        \"teal\": Array [\n          \"#e7fcef\",\n          \"#cdf9de\",\n          \"#b0f5ca\",\n          \"#8df0b3\",\n          \"#64eb98\",\n          \"#2de473\",\n          \"#29ce68\",\n          \"#24b55c\",\n          \"#1e974c\",\n          \"#166d37\",\n        ],\n        \"violet\": Array [\n          \"#f2ebfc\",\n          \"#e3d4fa\",\n          \"#d1baf6\",\n          \"#bd9bf2\",\n          \"#a173ed\",\n          \"#732de4\",\n          \"#6829cd\",\n          \"#5a23b3\",\n          \"#4a1d93\",\n          \"#341467\",\n        ],\n        \"warning\": \"#e4732d\",\n        \"white\": \"#ffffff\",\n        \"yellow\": Array [\n          \"#fbf9e3\",\n          \"#f7f2c4\",\n          \"#f3eaa4\",\n          \"#efe280\",\n          \"#ead959\",\n          \"#e4cf2d\",\n          \"#cebb29\",\n          \"#b5a524\",\n          \"#97891e\",\n          \"#6d6316\",\n        ],\n      },\n      \"cx\": [Function],\n      \"font\": \"\\\\\"Phantom Sans\\\\\",-apple-system,BlinkMacSystemFont,\\\\\"Segoe UI\\\\\",Roboto,sans-serif,\\\\\"Apple Color Emoji\\\\\",\\\\\"Segoe UI Emoji\\\\\",\\\\\"Segoe UI Symbol\\\\\"\",\n      \"fontSizes\": Array [\n        13.5,\n        16,\n        18,\n        24,\n        27,\n        36,\n        48,\n        54,\n        72,\n        96,\n      ],\n      \"fontWeights\": Object {\n        \"bold\": \"bold\",\n        \"regular\": \"regular\",\n      },\n      \"gradient\": [Function],\n      \"hexa\": [Function],\n      \"mediaQueries\": Object {\n        \"0\": \"@media screen and (min-width:32em)\",\n        \"1\": \"@media screen and (min-width:48em)\",\n        \"2\": \"@media screen and (min-width:64em)\",\n        \"3\": \"@media screen and (min-width:80em)\",\n        \"reduceMotion\": \"@media (prefers-reduced-motion: reduce)\",\n        \"reduceTransparency\": \"@media (prefers-reduced-transparency: reduce)\",\n      },\n      \"mono\": \"SFMono-Regular,\\\\\"Roboto Mono\\\\\",Menlo,monospace\",\n      \"pill\": \"9999px\",\n      \"radii\": Array [\n        \"0px\",\n        \"4px\",\n        \"8px\",\n        \"16px\",\n        \"9999px\",\n      ],\n      \"radius\": \"4px\",\n      \"regular\": \"regular\",\n      \"scaleFactor\": 1.0625,\n      \"shadowColor\": \"rgba(0,0,0,0.125)\",\n      \"space\": Array [\n        0,\n        6,\n        12,\n        18,\n        24,\n        36,\n        72,\n        108,\n        144,\n        288,\n        432,\n      ],\n      \"transition\": \"0.1875s cubic-bezier(0.375, 0, 0.675, 1)\",\n    }\n  }\n  viewBox=\"0 0 32 32\"\n  width={24}\n  xmlns=\"http://www.w3.org/2000/svg\"\n>\n  <g>\n    <path\n      d=\"M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z\"\n    />\n  </g>\n</svg>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/IconButton.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`IconButton renders 1`] = `\n.c1 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: transparent;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c1:hover,\n.c1:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.125);\n}\n\n.c1:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);\n}\n\n.c2 {\n  -webkit-flex: none;\n  -ms-flex: none;\n  flex: none;\n}\n\n.c0 {\n  box-shadow: none !important;\n  line-height: 0 !important;\n}\n\n<button\n  className=\"c0 c1\"\n  color=\"white\"\n  fontSize={3}\n>\n  <svg\n    aria-label=\"flag\"\n    className=\"c2 \"\n    clipRule=\"evenodd\"\n    fill=\"currentColor\"\n    fillRule=\"evenodd\"\n    height={24}\n    preserveAspectRatio=\"xMidYMid meet\"\n    strokeLinejoin=\"round\"\n    strokeMiterlimit=\"1.414\"\n    theme={\n      Object {\n        \"bold\": \"bold\",\n        \"boxShadows\": Array [\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)\",\n        ],\n        \"breakpoints\": Array [\n          32,\n          48,\n          64,\n          80,\n        ],\n        \"colors\": Object {\n          \"accent\": \"#7280ed\",\n          \"base\": \"#2d9ce4\",\n          \"black\": \"#384046\",\n          \"blue\": Array [\n            \"#e6f4fc\",\n            \"#cce7f8\",\n            \"#add9f5\",\n            \"#8bc9f0\",\n            \"#62b6eb\",\n            \"#2d9ee4\",\n            \"#298fce\",\n            \"#247db4\",\n            \"#1d6795\",\n            \"#154a6b\",\n          ],\n          \"cyan\": Array [\n            \"#e7fcfa\",\n            \"#ccf9f3\",\n            \"#aff5ed\",\n            \"#8cf0e5\",\n            \"#63ebdb\",\n            \"#2de4cf\",\n            \"#29cebb\",\n            \"#24b5a5\",\n            \"#1e9789\",\n            \"#166d63\",\n          ],\n          \"dark\": \"#17171d\",\n          \"darker\": \"#121217\",\n          \"error\": \"#b52434\",\n          \"fuschia\": Array [\n            \"#faebfc\",\n            \"#f5d4fa\",\n            \"#efbaf6\",\n            \"#e89bf2\",\n            \"#df73ed\",\n            \"#cf2de4\",\n            \"#bb29ce\",\n            \"#a424b5\",\n            \"#881d95\",\n            \"#61156b\",\n          ],\n          \"gray\": Array [\n            \"#f9f9fa\",\n            \"#ebeeef\",\n            \"#dde1e4\",\n            \"#cdd4d8\",\n            \"#bcc5cb\",\n            \"#a9b5bc\",\n            \"#93a2ab\",\n            \"#7a8c97\",\n            \"#606e77\",\n            \"#384046\",\n          ],\n          \"green\": Array [\n            \"#eafce7\",\n            \"#d2f9cd\",\n            \"#b7f5b0\",\n            \"#99f08d\",\n            \"#73eb64\",\n            \"#42e42d\",\n            \"#3cce29\",\n            \"#35b524\",\n            \"#2c971e\",\n            \"#206d16\",\n          ],\n          \"indigo\": Array [\n            \"#ebedfc\",\n            \"#d4d8f9\",\n            \"#bac1f6\",\n            \"#9aa4f2\",\n            \"#7280ed\",\n            \"#2d42e4\",\n            \"#283bcd\",\n            \"#2334b3\",\n            \"#1d2a92\",\n            \"#141e66\",\n          ],\n          \"info\": \"#2d9ee4\",\n          \"lime\": Array [\n            \"#f2fbe4\",\n            \"#e5f8c6\",\n            \"#d6f4a6\",\n            \"#c6ef83\",\n            \"#b3ea5b\",\n            \"#9ee42d\",\n            \"#8fce29\",\n            \"#7eb524\",\n            \"#69971e\",\n            \"#4c6d16\",\n          ],\n          \"muted\": \"#7a8c97\",\n          \"orange\": Array [\n            \"#fcefe7\",\n            \"#f9ddcc\",\n            \"#f5caaf\",\n            \"#f0b38d\",\n            \"#eb9763\",\n            \"#e4732d\",\n            \"#ce6829\",\n            \"#b45b24\",\n            \"#954b1d\",\n            \"#6b3615\",\n          ],\n          \"pink\": Array [\n            \"#fcebf6\",\n            \"#fad5eb\",\n            \"#f6bbdf\",\n            \"#f29cd1\",\n            \"#ed73be\",\n            \"#e42d9e\",\n            \"#ce298f\",\n            \"#b5247d\",\n            \"#961e68\",\n            \"#6b154a\",\n          ],\n          \"primary\": \"#e42d42\",\n          \"red\": Array [\n            \"#fcebed\",\n            \"#fad5d9\",\n            \"#f6bcc2\",\n            \"#f29da7\",\n            \"#ed7582\",\n            \"#e42d42\",\n            \"#ce293c\",\n            \"#b52434\",\n            \"#951d2b\",\n            \"#6b151f\",\n          ],\n          \"silver\": \"#7a8c97\",\n          \"slate\": \"#606e77\",\n          \"smoke\": \"#dde1e4\",\n          \"snow\": \"#f9f9fa\",\n          \"success\": \"#2de473\",\n          \"teal\": Array [\n            \"#e7fcef\",\n            \"#cdf9de\",\n            \"#b0f5ca\",\n            \"#8df0b3\",\n            \"#64eb98\",\n            \"#2de473\",\n            \"#29ce68\",\n            \"#24b55c\",\n            \"#1e974c\",\n            \"#166d37\",\n          ],\n          \"violet\": Array [\n            \"#f2ebfc\",\n            \"#e3d4fa\",\n            \"#d1baf6\",\n            \"#bd9bf2\",\n            \"#a173ed\",\n            \"#732de4\",\n            \"#6829cd\",\n            \"#5a23b3\",\n            \"#4a1d93\",\n            \"#341467\",\n          ],\n          \"warning\": \"#e4732d\",\n          \"white\": \"#ffffff\",\n          \"yellow\": Array [\n            \"#fbf9e3\",\n            \"#f7f2c4\",\n            \"#f3eaa4\",\n            \"#efe280\",\n            \"#ead959\",\n            \"#e4cf2d\",\n            \"#cebb29\",\n            \"#b5a524\",\n            \"#97891e\",\n            \"#6d6316\",\n          ],\n        },\n        \"cx\": [Function],\n        \"font\": \"\\\\\"Phantom Sans\\\\\",-apple-system,BlinkMacSystemFont,\\\\\"Segoe UI\\\\\",Roboto,sans-serif,\\\\\"Apple Color Emoji\\\\\",\\\\\"Segoe UI Emoji\\\\\",\\\\\"Segoe UI Symbol\\\\\"\",\n        \"fontSizes\": Array [\n          13.5,\n          16,\n          18,\n          24,\n          27,\n          36,\n          48,\n          54,\n          72,\n          96,\n        ],\n        \"fontWeights\": Object {\n          \"bold\": \"bold\",\n          \"regular\": \"regular\",\n        },\n        \"gradient\": [Function],\n        \"hexa\": [Function],\n        \"mediaQueries\": Object {\n          \"0\": \"@media screen and (min-width:32em)\",\n          \"1\": \"@media screen and (min-width:48em)\",\n          \"2\": \"@media screen and (min-width:64em)\",\n          \"3\": \"@media screen and (min-width:80em)\",\n          \"reduceMotion\": \"@media (prefers-reduced-motion: reduce)\",\n          \"reduceTransparency\": \"@media (prefers-reduced-transparency: reduce)\",\n        },\n        \"mono\": \"SFMono-Regular,\\\\\"Roboto Mono\\\\\",Menlo,monospace\",\n        \"pill\": \"9999px\",\n        \"radii\": Array [\n          \"0px\",\n          \"4px\",\n          \"8px\",\n          \"16px\",\n          \"9999px\",\n        ],\n        \"radius\": \"4px\",\n        \"regular\": \"regular\",\n        \"scaleFactor\": 1.0625,\n        \"shadowColor\": \"rgba(0,0,0,0.125)\",\n        \"space\": Array [\n          0,\n          6,\n          12,\n          18,\n          24,\n          36,\n          72,\n          108,\n          144,\n          288,\n          432,\n        ],\n        \"transition\": \"0.1875s cubic-bezier(0.375, 0, 0.675, 1)\",\n      }\n    }\n    viewBox=\"0 0 32 32\"\n    width={24}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g>\n      <path\n        d=\"M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z\"\n      />\n    </g>\n  </svg>\n</button>\n`;\n\nexports[`IconButton renders with circle prop 1`] = `\n.c1 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: transparent;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c1:hover,\n.c1:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.125);\n}\n\n.c1:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);\n}\n\n.c2 {\n  -webkit-flex: none;\n  -ms-flex: none;\n  flex: none;\n}\n\n.c0 {\n  box-shadow: none !important;\n  line-height: 0 !important;\n  padding: 12px;\n}\n\n<button\n  className=\"c0 c1\"\n  color=\"white\"\n  fontSize={3}\n>\n  <svg\n    aria-label=\"flag\"\n    className=\"c2 \"\n    clipRule=\"evenodd\"\n    fill=\"currentColor\"\n    fillRule=\"evenodd\"\n    height={24}\n    preserveAspectRatio=\"xMidYMid meet\"\n    strokeLinejoin=\"round\"\n    strokeMiterlimit=\"1.414\"\n    theme={\n      Object {\n        \"bold\": \"bold\",\n        \"boxShadows\": Array [\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)\",\n          \"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)\",\n        ],\n        \"breakpoints\": Array [\n          32,\n          48,\n          64,\n          80,\n        ],\n        \"colors\": Object {\n          \"accent\": \"#7280ed\",\n          \"base\": \"#2d9ce4\",\n          \"black\": \"#384046\",\n          \"blue\": Array [\n            \"#e6f4fc\",\n            \"#cce7f8\",\n            \"#add9f5\",\n            \"#8bc9f0\",\n            \"#62b6eb\",\n            \"#2d9ee4\",\n            \"#298fce\",\n            \"#247db4\",\n            \"#1d6795\",\n            \"#154a6b\",\n          ],\n          \"cyan\": Array [\n            \"#e7fcfa\",\n            \"#ccf9f3\",\n            \"#aff5ed\",\n            \"#8cf0e5\",\n            \"#63ebdb\",\n            \"#2de4cf\",\n            \"#29cebb\",\n            \"#24b5a5\",\n            \"#1e9789\",\n            \"#166d63\",\n          ],\n          \"dark\": \"#17171d\",\n          \"darker\": \"#121217\",\n          \"error\": \"#b52434\",\n          \"fuschia\": Array [\n            \"#faebfc\",\n            \"#f5d4fa\",\n            \"#efbaf6\",\n            \"#e89bf2\",\n            \"#df73ed\",\n            \"#cf2de4\",\n            \"#bb29ce\",\n            \"#a424b5\",\n            \"#881d95\",\n            \"#61156b\",\n          ],\n          \"gray\": Array [\n            \"#f9f9fa\",\n            \"#ebeeef\",\n            \"#dde1e4\",\n            \"#cdd4d8\",\n            \"#bcc5cb\",\n            \"#a9b5bc\",\n            \"#93a2ab\",\n            \"#7a8c97\",\n            \"#606e77\",\n            \"#384046\",\n          ],\n          \"green\": Array [\n            \"#eafce7\",\n            \"#d2f9cd\",\n            \"#b7f5b0\",\n            \"#99f08d\",\n            \"#73eb64\",\n            \"#42e42d\",\n            \"#3cce29\",\n            \"#35b524\",\n            \"#2c971e\",\n            \"#206d16\",\n          ],\n          \"indigo\": Array [\n            \"#ebedfc\",\n            \"#d4d8f9\",\n            \"#bac1f6\",\n            \"#9aa4f2\",\n            \"#7280ed\",\n            \"#2d42e4\",\n            \"#283bcd\",\n            \"#2334b3\",\n            \"#1d2a92\",\n            \"#141e66\",\n          ],\n          \"info\": \"#2d9ee4\",\n          \"lime\": Array [\n            \"#f2fbe4\",\n            \"#e5f8c6\",\n            \"#d6f4a6\",\n            \"#c6ef83\",\n            \"#b3ea5b\",\n            \"#9ee42d\",\n            \"#8fce29\",\n            \"#7eb524\",\n            \"#69971e\",\n            \"#4c6d16\",\n          ],\n          \"muted\": \"#7a8c97\",\n          \"orange\": Array [\n            \"#fcefe7\",\n            \"#f9ddcc\",\n            \"#f5caaf\",\n            \"#f0b38d\",\n            \"#eb9763\",\n            \"#e4732d\",\n            \"#ce6829\",\n            \"#b45b24\",\n            \"#954b1d\",\n            \"#6b3615\",\n          ],\n          \"pink\": Array [\n            \"#fcebf6\",\n            \"#fad5eb\",\n            \"#f6bbdf\",\n            \"#f29cd1\",\n            \"#ed73be\",\n            \"#e42d9e\",\n            \"#ce298f\",\n            \"#b5247d\",\n            \"#961e68\",\n            \"#6b154a\",\n          ],\n          \"primary\": \"#e42d42\",\n          \"red\": Array [\n            \"#fcebed\",\n            \"#fad5d9\",\n            \"#f6bcc2\",\n            \"#f29da7\",\n            \"#ed7582\",\n            \"#e42d42\",\n            \"#ce293c\",\n            \"#b52434\",\n            \"#951d2b\",\n            \"#6b151f\",\n          ],\n          \"silver\": \"#7a8c97\",\n          \"slate\": \"#606e77\",\n          \"smoke\": \"#dde1e4\",\n          \"snow\": \"#f9f9fa\",\n          \"success\": \"#2de473\",\n          \"teal\": Array [\n            \"#e7fcef\",\n            \"#cdf9de\",\n            \"#b0f5ca\",\n            \"#8df0b3\",\n            \"#64eb98\",\n            \"#2de473\",\n            \"#29ce68\",\n            \"#24b55c\",\n            \"#1e974c\",\n            \"#166d37\",\n          ],\n          \"violet\": Array [\n            \"#f2ebfc\",\n            \"#e3d4fa\",\n            \"#d1baf6\",\n            \"#bd9bf2\",\n            \"#a173ed\",\n            \"#732de4\",\n            \"#6829cd\",\n            \"#5a23b3\",\n            \"#4a1d93\",\n            \"#341467\",\n          ],\n          \"warning\": \"#e4732d\",\n          \"white\": \"#ffffff\",\n          \"yellow\": Array [\n            \"#fbf9e3\",\n            \"#f7f2c4\",\n            \"#f3eaa4\",\n            \"#efe280\",\n            \"#ead959\",\n            \"#e4cf2d\",\n            \"#cebb29\",\n            \"#b5a524\",\n            \"#97891e\",\n            \"#6d6316\",\n          ],\n        },\n        \"cx\": [Function],\n        \"font\": \"\\\\\"Phantom Sans\\\\\",-apple-system,BlinkMacSystemFont,\\\\\"Segoe UI\\\\\",Roboto,sans-serif,\\\\\"Apple Color Emoji\\\\\",\\\\\"Segoe UI Emoji\\\\\",\\\\\"Segoe UI Symbol\\\\\"\",\n        \"fontSizes\": Array [\n          13.5,\n          16,\n          18,\n          24,\n          27,\n          36,\n          48,\n          54,\n          72,\n          96,\n        ],\n        \"fontWeights\": Object {\n          \"bold\": \"bold\",\n          \"regular\": \"regular\",\n        },\n        \"gradient\": [Function],\n        \"hexa\": [Function],\n        \"mediaQueries\": Object {\n          \"0\": \"@media screen and (min-width:32em)\",\n          \"1\": \"@media screen and (min-width:48em)\",\n          \"2\": \"@media screen and (min-width:64em)\",\n          \"3\": \"@media screen and (min-width:80em)\",\n          \"reduceMotion\": \"@media (prefers-reduced-motion: reduce)\",\n          \"reduceTransparency\": \"@media (prefers-reduced-transparency: reduce)\",\n        },\n        \"mono\": \"SFMono-Regular,\\\\\"Roboto Mono\\\\\",Menlo,monospace\",\n        \"pill\": \"9999px\",\n        \"radii\": Array [\n          \"0px\",\n          \"4px\",\n          \"8px\",\n          \"16px\",\n          \"9999px\",\n        ],\n        \"radius\": \"4px\",\n        \"regular\": \"regular\",\n        \"scaleFactor\": 1.0625,\n        \"shadowColor\": \"rgba(0,0,0,0.125)\",\n        \"space\": Array [\n          0,\n          6,\n          12,\n          18,\n          24,\n          36,\n          72,\n          108,\n          144,\n          288,\n          432,\n        ],\n        \"transition\": \"0.1875s cubic-bezier(0.375, 0, 0.675, 1)\",\n      }\n    }\n    viewBox=\"0 0 32 32\"\n    width={24}\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <g>\n      <path\n        d=\"M10.953 5.034a1 1 0 0 0-1.225.707L4.034 26.992a1 1 0 1 0 1.932.517l5.694-21.25a1 1 0 0 0-.707-1.225zm2.107 9.005c.425-1.703.798-3.036 1.225-4.079.429-1.058.766-1.43.912-1.532a.216.216 0 0 0 .022-.023l.017.003c.131-.022.133-.021.353.073l.065.028c.584.23 1.492.826 2.826 2.076 1.584 1.462 3.173 2.338 4.36 2.738a9.906 9.906 0 0 0 2.045.4c-.312 1.161-.627 2.297-1.028 3.334-.405 1.061-.756 1.774-1.284 2.307-.385.41-.719.542-1.131.527-.519-.018-1.447-.289-2.901-1.37-1.746-1.291-3.25-2.073-4.327-2.514a17.61 17.61 0 0 0-1.498-.524c.08-.375.193-.838.344-1.444zm12.104-1.615a.522.522 0 0 1 0 0zm-13.21 2.816l.017.008a.08.08 0 0 1-.017-.008zm-.834-1.685c1.727-6.93 3.174-9.634 8.727-4.43 2.833 2.655 4.933 2.646 6.14 2.641 1.16-.005 1.494-.007.86 2.359-1.294 4.83-3.053 10.796-9.5 6-2.638-1.962-4.392-2.486-5.449-2.801-1.526-.456-1.599-.478-.778-3.769z\"\n      />\n    </g>\n  </svg>\n</button>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Image.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Image renders 1`] = `\n.c0 {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n<img\n  alt=\"Smiling students at a hackathon\"\n  className=\"c0 \"\n  src=\"https://hackclub.com/social-photo_2.jpg\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Input.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Input renders 1`] = `\n.c0 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dde1e4;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  font-size: 18px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  width: 100%;\n  color: inherit;\n  background-color: transparent;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0:focus {\n  outline: none;\n  border-color: #2d9ee4;\n  box-shadow: 0 0 0 2px #add9f5;\n}\n\n.c0[type='select'] {\n  background: #fff url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;\n  background-size: .5rem;\n}\n\n.c0[type='textarea'] {\n  resize: vertical;\n}\n\n<input\n  className=\"c0\"\n  color=\"inherit\"\n  fontSize={2}\n  id=\"renders\"\n  width={1}\n/>\n`;\n\nexports[`Input renders with custom fontSize 1`] = `\n.c0 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dde1e4;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  font-size: 27px;\n  margin: 0px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  width: 100%;\n  color: inherit;\n  background-color: transparent;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0:focus {\n  outline: none;\n  border-color: #2d9ee4;\n  box-shadow: 0 0 0 2px #add9f5;\n}\n\n.c0[type='select'] {\n  background: #fff url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;\n  background-size: .5rem;\n}\n\n.c0[type='textarea'] {\n  resize: vertical;\n}\n\n<input\n  className=\"c0\"\n  color=\"inherit\"\n  fontSize={4}\n  id=\"fontSize\"\n  width={1}\n/>\n`;\n\nexports[`Input renders with custom spacing 1`] = `\n.c0 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  vertical-align: middle;\n  max-width: 32rem;\n  min-height: 36px;\n  line-height: inherit;\n  font-family: inherit;\n  background-color: transparent;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #dde1e4;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  font-size: 18px;\n  margin: 24px;\n  padding: 24px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-top: 6px;\n  padding-bottom: 6px;\n  width: 100%;\n  color: inherit;\n  background-color: transparent;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0::-ms-clear {\n  display: none;\n}\n\n.c0:focus {\n  outline: none;\n  border-color: #2d9ee4;\n  box-shadow: 0 0 0 2px #add9f5;\n}\n\n.c0[type='select'] {\n  background: #fff url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23606e77' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\") no-repeat right .75rem center;\n  background-size: .5rem;\n}\n\n.c0[type='textarea'] {\n  resize: vertical;\n}\n\n<input\n  className=\"c0\"\n  color=\"inherit\"\n  fontSize={2}\n  id=\"space\"\n  width={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Label.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Label it renders 1`] = `\n.c1 {\n  font-size: 18px;\n  margin: 0px;\n  color: #384046;\n}\n\n.c0 {\n  display: block;\n}\n\n.c0 a {\n  color: #2d9ee4;\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n\n<label\n  className=\"c0 c1\"\n  color=\"black\"\n  fontSize={2}\n  width={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/LargeButton.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`LargeButton inverted 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 18px;\n  padding-bottom: 18px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  background-color: #ffffff;\n  color: #e42d42;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.125);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(0,0,0,0.125);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(0,0,0,0.125);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(0,0,0,0.125);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`LargeButton larger 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 18px;\n  padding-bottom: 18px;\n  background-color: #7280ed;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(114,128,237,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(114,128,237,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(114,128,237,0.25);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(114,128,237,0.25);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`LargeButton renders 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 24px;\n  padding-right: 24px;\n  padding-top: 18px;\n  padding-bottom: 18px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Link.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Link renders 1`] = `\n.c0 {\n  color: #2d9ee4;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.c0:before,\n.c0:after {\n  -webkit-text-decoration: none !important;\n  text-decoration: none !important;\n  display: inline-block;\n}\n\n<a\n  className=\"c0\"\n  color=\"info\"\n>\n  Hello\n</a>\n`;\n\nexports[`Link renders chevronleft 1`] = `\n.c0 {\n  color: #2d9ee4;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.c0:before,\n.c0:after {\n  -webkit-text-decoration: none !important;\n  text-decoration: none !important;\n  display: inline-block;\n}\n\n.c0:before {\n  content: '‹';\n  padding-right: 0.25em;\n}\n\n<a\n  className=\"c0\"\n  color=\"info\"\n>\n  Left\n</a>\n`;\n\nexports[`Link renders chevronright 1`] = `\n.c0 {\n  color: #2d9ee4;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.c0:before,\n.c0:after {\n  -webkit-text-decoration: none !important;\n  text-decoration: none !important;\n  display: inline-block;\n}\n\n.c0:after {\n  content: '›';\n  padding-left: 0.25em;\n}\n\n<a\n  className=\"c0\"\n  color=\"info\"\n>\n  Right\n</a>\n`;\n\nexports[`Link renders hoverline 1`] = `\n.c0 {\n  color: #2d9ee4;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n}\n\n.c0:focus,\n.c0:hover {\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n\n.c0:before,\n.c0:after {\n  -webkit-text-decoration: none !important;\n  text-decoration: none !important;\n  display: inline-block;\n}\n\n<a\n  className=\"c0\"\n  color=\"info\"\n>\n  Hoverline\n</a>\n`;\n\nexports[`Link renders underline 1`] = `\n.c0 {\n  color: #2d9ee4;\n  -webkit-text-decoration: underline;\n  text-decoration: underline;\n}\n\n.c0:before,\n.c0:after {\n  -webkit-text-decoration: none !important;\n  text-decoration: none !important;\n  display: inline-block;\n}\n\n<a\n  className=\"c0\"\n  color=\"info\"\n>\n  Underline\n</a>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Loading.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Loading renders 1`] = `\n.c1 {\n  color: #e42d42;\n}\n\n.c0 {\n  display: -webkit-inline-box;\n  display: -webkit-inline-flex;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%,-50%);\n  -ms-transform: translate(-50%,-50%);\n  transform: translate(-50%,-50%);\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n}\n\n.c2 {\n  position: absolute;\n  border: 4px solid currentColor;\n  opacity: 1;\n  border-radius: 50%;\n  -webkit-transform-origin: center;\n  -ms-transform-origin: center;\n  transform-origin: center;\n  -webkit-animation: EdArQ 0.975s ease-out infinite;\n  animation: EdArQ 0.975s ease-out infinite;\n}\n\n<div\n  aria-label=\"Loading\"\n  className=\"c0 c1\"\n  color=\"primary\"\n  role=\"presentation\"\n>\n  <div\n    className=\"c2 \"\n  />\n  <div\n    className=\"c2 \"\n  />\n</div>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/OutlineButton.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`OutlineButton disabled prop sets 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  opacity: 0.25;\n  cursor: not-allowed;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n  background: transparent;\n  border-width: 2px;\n  border-style: solid;\n  border-color: #e42d42;\n  box-shadow: none;\n  color: #e42d42;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);\n}\n\n.c0:focus:enabled,\n.c0:hover:enabled {\n  background: #e42d42;\n  color: #ffffff;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  disabled={true}\n  fontSize={3}\n/>\n`;\n\nexports[`OutlineButton renders 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n  background: transparent;\n  border-width: 2px;\n  border-style: solid;\n  border-color: #e42d42;\n  box-shadow: none;\n  color: #e42d42;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(228,45,66,0.25);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(228,45,66,0.25);\n}\n\n.c0:focus:enabled,\n.c0:hover:enabled {\n  background: #e42d42;\n  color: #ffffff;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n\nexports[`OutlineButton with custom color 1`] = `\n.c0 {\n  margin: 0px;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  background-color: #ffffff;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n  text-transform: uppercase;\n  box-shadow: 0 2px 12px rgba(0,0,0,0.125);\n  background: transparent;\n  border-width: 2px;\n  border-style: solid;\n  border-color: #ffffff;\n  box-shadow: none;\n  color: #ffffff;\n}\n\n.c0:hover,\n.c0:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(255,255,255,0.25);\n}\n\n.c0:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(255,255,255,0.25);\n}\n\n.c0:hover,\n.c0:focus {\n  box-shadow: 0 2px 12px 2px rgba(255,255,255,0.25);\n}\n\n.c0:active {\n  box-shadow: 0 4px 16px 2px rgba(255,255,255,0.25);\n}\n\n.c0:focus:enabled,\n.c0:hover:enabled {\n  background: #ffffff;\n  color: #ffffff;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) background, 0.1875s cubic-bezier(0.375,0,0.675,1) color;\n}\n\n<a\n  className=\"c0\"\n  color=\"white\"\n  fontSize={3}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Section.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Section renders 1`] = `\n.c2 {\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 24px;\n  padding-bottom: 24px;\n  color: #ffffff;\n  text-align: center;\n}\n\n.c1 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-align-items: center;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  -webkit-justify-content: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-flex-direction: column;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n.c0 {\n  text-align: center;\n}\n\n@media screen and (min-width:32em) {\n  .c2 {\n    padding-top: 36px;\n    padding-bottom: 36px;\n  }\n}\n\n<div\n  className=\"c0 c1 c2\"\n  color=\"white\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Sheet.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Sheet renders 1`] = `\n.c3 {\n  margin-left: auto;\n  margin-right: auto;\n  padding: 18px;\n  width: 100%;\n  background-color: rgba(255,255,255,0.875);\n}\n\n.c2 {\n  max-width: 72rem;\n}\n\n.c1 {\n  border-radius: 4px;\n}\n\n.c0 {\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  box-shadow: 0 8px 32px rgba(0,0,0,0.0625);\n}\n\n@media screen and (min-width:32em) {\n  .c3 {\n    padding: 24px;\n  }\n}\n\n<div\n  className=\"c0 c1 c2 c3\"\n  width={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Slider.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Slider renders 1`] = `\n.c0 {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: block;\n  border-radius: 9999px;\n  height: 4px;\n  cursor: pointer;\n  width: 100%;\n  background-color: #dde1e4;\n  color: #e42d42;\n}\n\n.c0::-webkit-slider-thumb {\n  width: 16px;\n  height: 16px;\n  background-color: currentColor;\n  border: 0;\n  border-radius: 9999px;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n<input\n  className=\"c0\"\n  color=\"primary\"\n  id=\"renders\"\n  type=\"range\"\n  width={1}\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Submit.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Submit renders 1`] = `\n.c1 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c1:hover,\n.c1:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c1:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0 {\n  text-transform: uppercase;\n}\n\n<input\n  className=\"c0 c1\"\n  color=\"white\"\n  fontSize={3}\n  type=\"submit\"\n/>\n`;\n\nexports[`Submit renders lg 1`] = `\n.c1 {\n  margin: 0px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  background-color: #e42d42;\n  color: #ffffff;\n  font-size: 24px;\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  -webkit-text-decoration: none;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: bold;\n  line-height: 1.125;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  -webkit-transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  transition: 0.1875s cubic-bezier(0.375,0,0.675,1) box-shadow;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.125);\n  border-radius: 9999px;\n  border: none;\n}\n\n.c1:hover,\n.c1:focus {\n  outline: 0;\n  box-shadow: 0 2px 6px rgba(228,45,66,0.25);\n}\n\n.c1:active {\n  outline: 0;\n  box-shadow: 0 2px 8px 2px rgba(228,45,66,0.25);\n}\n\n.c0 {\n  text-transform: uppercase;\n}\n\n<input\n  className=\"c0 c1\"\n  color=\"white\"\n  fontSize={3}\n  type=\"submit\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/Text.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Text align prop sets text-align 1`] = `\n.c0 {\n  margin: 0px;\n  text-align: center;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text bold prop sets font-weight 1`] = `\n.c0 {\n  margin: 0px;\n  font-weight: bold;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text caps prop sets text-transform 1`] = `\n.c0 {\n  margin: 0px;\n  text-transform: uppercase;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text maxWidth prop sets max-width 1`] = `\n.c0 {\n  margin: 0px;\n  max-width: 48rem;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text mt prop sets margin-top 1`] = `\n.c0 {\n  margin: 0px;\n  margin-top: 12px;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text regular prop sets font-weight 1`] = `\n.c0 {\n  margin: 0px;\n  font-weight: regular;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n\nexports[`Text renders 1`] = `\n.c0 {\n  margin: 0px;\n}\n\n<p\n  className=\"c0\"\n/>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/ThemeProvider.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`ThemeProvider renders content with theme 1`] = `\n.c0 {\n  color: #e42d42;\n}\n\n<p\n  className=\"c0\"\n>\n  Hello!\n</p>\n`;\n"
  },
  {
    "path": "src/__tests__/__snapshots__/theme.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`theme snapshot 1`] = `\nObject {\n  \"bold\": \"bold\",\n  \"boxShadows\": Array [\n    \"0 0 2px 0 rgba(0,0,0,.0625),0 2px 4px 0 rgba(0,0,0,0.125)\",\n    \"0 0 2px 0 rgba(0,0,0,.0625),0 4px 8px 0 rgba(0,0,0,0.125)\",\n    \"0 0 2px 0 rgba(0,0,0,.0625),0 12px 12px 0 rgba(0,0,0,0.125)\",\n    \"0 0 2px 0 rgba(0,0,0,.0625),0 24px 24px 0 rgba(0,0,0,0.125)\",\n  ],\n  \"breakpoints\": Array [\n    32,\n    48,\n    64,\n    80,\n  ],\n  \"colors\": Object {\n    \"accent\": \"#7280ed\",\n    \"base\": \"#2d9ce4\",\n    \"black\": \"#384046\",\n    \"blue\": Array [\n      \"#e6f4fc\",\n      \"#cce7f8\",\n      \"#add9f5\",\n      \"#8bc9f0\",\n      \"#62b6eb\",\n      \"#2d9ee4\",\n      \"#298fce\",\n      \"#247db4\",\n      \"#1d6795\",\n      \"#154a6b\",\n    ],\n    \"cyan\": Array [\n      \"#e7fcfa\",\n      \"#ccf9f3\",\n      \"#aff5ed\",\n      \"#8cf0e5\",\n      \"#63ebdb\",\n      \"#2de4cf\",\n      \"#29cebb\",\n      \"#24b5a5\",\n      \"#1e9789\",\n      \"#166d63\",\n    ],\n    \"dark\": \"#17171d\",\n    \"darker\": \"#121217\",\n    \"error\": \"#b52434\",\n    \"fuschia\": Array [\n      \"#faebfc\",\n      \"#f5d4fa\",\n      \"#efbaf6\",\n      \"#e89bf2\",\n      \"#df73ed\",\n      \"#cf2de4\",\n      \"#bb29ce\",\n      \"#a424b5\",\n      \"#881d95\",\n      \"#61156b\",\n    ],\n    \"gray\": Array [\n      \"#f9f9fa\",\n      \"#ebeeef\",\n      \"#dde1e4\",\n      \"#cdd4d8\",\n      \"#bcc5cb\",\n      \"#a9b5bc\",\n      \"#93a2ab\",\n      \"#7a8c97\",\n      \"#606e77\",\n      \"#384046\",\n    ],\n    \"green\": Array [\n      \"#eafce7\",\n      \"#d2f9cd\",\n      \"#b7f5b0\",\n      \"#99f08d\",\n      \"#73eb64\",\n      \"#42e42d\",\n      \"#3cce29\",\n      \"#35b524\",\n      \"#2c971e\",\n      \"#206d16\",\n    ],\n    \"indigo\": Array [\n      \"#ebedfc\",\n      \"#d4d8f9\",\n      \"#bac1f6\",\n      \"#9aa4f2\",\n      \"#7280ed\",\n      \"#2d42e4\",\n      \"#283bcd\",\n      \"#2334b3\",\n      \"#1d2a92\",\n      \"#141e66\",\n    ],\n    \"info\": \"#2d9ee4\",\n    \"lime\": Array [\n      \"#f2fbe4\",\n      \"#e5f8c6\",\n      \"#d6f4a6\",\n      \"#c6ef83\",\n      \"#b3ea5b\",\n      \"#9ee42d\",\n      \"#8fce29\",\n      \"#7eb524\",\n      \"#69971e\",\n      \"#4c6d16\",\n    ],\n    \"muted\": \"#7a8c97\",\n    \"orange\": Array [\n      \"#fcefe7\",\n      \"#f9ddcc\",\n      \"#f5caaf\",\n      \"#f0b38d\",\n      \"#eb9763\",\n      \"#e4732d\",\n      \"#ce6829\",\n      \"#b45b24\",\n      \"#954b1d\",\n      \"#6b3615\",\n    ],\n    \"pink\": Array [\n      \"#fcebf6\",\n      \"#fad5eb\",\n      \"#f6bbdf\",\n      \"#f29cd1\",\n      \"#ed73be\",\n      \"#e42d9e\",\n      \"#ce298f\",\n      \"#b5247d\",\n      \"#961e68\",\n      \"#6b154a\",\n    ],\n    \"primary\": \"#e42d42\",\n    \"red\": Array [\n      \"#fcebed\",\n      \"#fad5d9\",\n      \"#f6bcc2\",\n      \"#f29da7\",\n      \"#ed7582\",\n      \"#e42d42\",\n      \"#ce293c\",\n      \"#b52434\",\n      \"#951d2b\",\n      \"#6b151f\",\n    ],\n    \"silver\": \"#7a8c97\",\n    \"slate\": \"#606e77\",\n    \"smoke\": \"#dde1e4\",\n    \"snow\": \"#f9f9fa\",\n    \"success\": \"#2de473\",\n    \"teal\": Array [\n      \"#e7fcef\",\n      \"#cdf9de\",\n      \"#b0f5ca\",\n      \"#8df0b3\",\n      \"#64eb98\",\n      \"#2de473\",\n      \"#29ce68\",\n      \"#24b55c\",\n      \"#1e974c\",\n      \"#166d37\",\n    ],\n    \"violet\": Array [\n      \"#f2ebfc\",\n      \"#e3d4fa\",\n      \"#d1baf6\",\n      \"#bd9bf2\",\n      \"#a173ed\",\n      \"#732de4\",\n      \"#6829cd\",\n      \"#5a23b3\",\n      \"#4a1d93\",\n      \"#341467\",\n    ],\n    \"warning\": \"#e4732d\",\n    \"white\": \"#ffffff\",\n    \"yellow\": Array [\n      \"#fbf9e3\",\n      \"#f7f2c4\",\n      \"#f3eaa4\",\n      \"#efe280\",\n      \"#ead959\",\n      \"#e4cf2d\",\n      \"#cebb29\",\n      \"#b5a524\",\n      \"#97891e\",\n      \"#6d6316\",\n    ],\n  },\n  \"cx\": [Function],\n  \"font\": \"\\\\\"Phantom Sans\\\\\",-apple-system,BlinkMacSystemFont,\\\\\"Segoe UI\\\\\",Roboto,sans-serif,\\\\\"Apple Color Emoji\\\\\",\\\\\"Segoe UI Emoji\\\\\",\\\\\"Segoe UI Symbol\\\\\"\",\n  \"fontSizes\": Array [\n    13.5,\n    16,\n    18,\n    24,\n    27,\n    36,\n    48,\n    54,\n    72,\n    96,\n  ],\n  \"fontWeights\": Object {\n    \"bold\": \"bold\",\n    \"regular\": \"regular\",\n  },\n  \"gradient\": [Function],\n  \"hexa\": [Function],\n  \"mediaQueries\": Object {\n    \"0\": \"@media screen and (min-width:32em)\",\n    \"1\": \"@media screen and (min-width:48em)\",\n    \"2\": \"@media screen and (min-width:64em)\",\n    \"3\": \"@media screen and (min-width:80em)\",\n    \"reduceMotion\": \"@media (prefers-reduced-motion: reduce)\",\n    \"reduceTransparency\": \"@media (prefers-reduced-transparency: reduce)\",\n  },\n  \"mono\": \"SFMono-Regular,\\\\\"Roboto Mono\\\\\",Menlo,monospace\",\n  \"pill\": \"9999px\",\n  \"radii\": Array [\n    \"0px\",\n    \"4px\",\n    \"8px\",\n    \"16px\",\n    \"9999px\",\n  ],\n  \"radius\": \"4px\",\n  \"regular\": \"regular\",\n  \"scaleFactor\": 1.0625,\n  \"shadowColor\": \"rgba(0,0,0,0.125)\",\n  \"space\": Array [\n    0,\n    6,\n    12,\n    18,\n    24,\n    36,\n    72,\n    108,\n    144,\n    288,\n    432,\n  ],\n  \"transition\": \"0.1875s cubic-bezier(0.375, 0, 0.675, 1)\",\n}\n`;\n"
  },
  {
    "path": "src/__tests__/theme.js",
    "content": "import theme, { cx, colors, space, fontSizes, boxShadows } from '../theme'\n\nconst aliases = ['sm', 'md', 'lg', 'xl']\n\ndescribe('theme', () => {\n  test('exports an object', () => {\n    expect(typeof theme).toBe('object')\n  })\n\n  test('snapshot', () => {\n    expect(theme).toMatchSnapshot()\n  })\n\n  test('exports colors', () => {\n    expect(typeof colors).toBe('object')\n  })\n\n  test('cx works', () => {\n    expect(theme.cx('red.5')).toBe(theme.colors.red[5])\n    expect(theme.cx('#ff6d00')).toBe('#ff6d00')\n  })\n\n  test('hexa works', () => {\n    expect(theme.hexa('primary')).toBe('rgb(228, 45, 66)')\n    expect(theme.hexa('primary', 0.5)).toBe('rgba(228, 45, 66, 0.5)')\n  })\n\n  test('gradient works', () => {\n    const sample = theme.gradient('accent', 'info')\n    expect(sample).toMatch('radial-gradient')\n    expect(sample).toMatch(cx('accent'))\n    expect(sample).toMatch(cx('info'))\n  })\n\n  test('scales are objects', () => {\n    expect(typeof space).toBe('object')\n    expect(typeof fontSizes).toBe('object')\n    expect(typeof boxShadows).toBe('object')\n  })\n\n  test('breakpoints have aliases', () => {\n    aliases.forEach((alias, i) =>\n      expect(theme.breakpoints[alias]).toEqual(theme.breakpoints[i])\n    )\n  })\n\n  test('media queries have aliases', () => {\n    aliases.forEach((alias, i) =>\n      expect(theme.mediaQueries[alias]).toEqual(theme.mediaQueries[i])\n    )\n    expect(theme.mediaQueries.reduceMotion).toEqual(\n      '@media (prefers-reduced-motion: reduce)'\n    )\n    expect(theme.mediaQueries.reduceTransparency).toEqual(\n      '@media (prefers-reduced-transparency: reduce)'\n    )\n  })\n})\n"
  },
  {
    "path": "src/index.js",
    "content": "export { default as Avatar } from './Avatar'\nexport { default as BackgroundImage } from './BackgroundImage'\nexport { default as Badge } from './Badge'\nexport { default as BlockLink } from './BlockLink'\nexport { default as Box } from './Box'\nexport { default as Button } from './Button'\nexport { default as Card } from './Card'\nexport { default as Container } from './Container'\nexport { default as Field } from './Field'\nexport { default as Flex } from './Flex'\nexport { default as Heading } from './Heading'\nexport { default as Hide } from './Hide'\nexport { default as Icon } from './Icon'\nexport { default as IconButton } from './IconButton'\nexport { default as Image } from './Image'\nexport { default as Input } from './Input'\nexport { default as Label } from './Label'\nexport { default as LargeButton } from './LargeButton'\nexport { default as Link } from './Link'\nexport { default as Loading } from './Loading'\nexport { default as OutlineButton } from './OutlineButton'\nexport { default as Section } from './Section'\nexport { default as Sheet } from './Sheet'\nexport { default as Slider } from './Slider'\nexport { default as Submit } from './Submit'\nexport { default as Text } from './Text'\n\nexport { default as theme } from './theme'\nexport { default as ThemeProvider } from './ThemeProvider'\n\nexport * from './theme'\n"
  },
  {
    "path": "src/theme.js",
    "content": "import palx from 'palx'\nimport { includes, get } from 'lodash'\n\nconst red = '#e42d42'\nconst blue = '#2d9ce4'\nexport const palette = palx(blue)\n\nexport const grays = {\n  darker: '#121217',\n  dark: '#17171d',\n  black: palette.black,\n  slate: palette.gray[8],\n  silver: palette.gray[7],\n  smoke: palette.gray[2],\n  snow: palette.gray[0],\n  white: '#ffffff'\n}\n\nexport const brand = {\n  primary: red,\n  accent: palette.indigo[4],\n  success: palette.teal[5],\n  info: palette.blue[5],\n  warning: palette.orange[5],\n  error: palette.red[7],\n  muted: grays.silver\n}\n\nexport const colors = {\n  ...brand,\n  ...grays,\n  ...palette\n}\n\nexport const cx = key => get(colors, key, key)\n\nconst createMediaQuery = n => `@media screen and (min-width:${n}em)`\n\nconst addAliases = (arr, aliases) =>\n  aliases.forEach((key, i) =>\n    Object.defineProperty(arr, key, {\n      enumerable: false,\n      get() {\n        return this[i]\n      }\n    })\n  )\n\nconst aliases = ['sm', 'md', 'lg', 'xl']\nexport const breakpoints = [32, 48, 64, 80]\n\nexport const mediaQueries = {\n  ...breakpoints.map(createMediaQuery),\n  reduceMotion: '@media (prefers-reduced-motion: reduce)',\n  reduceTransparency: '@media (prefers-reduced-transparency: reduce)'\n}\n\naddAliases(breakpoints, aliases)\naddAliases(mediaQueries, aliases)\n\nexport const space = [0, 6, 12, 18, 24, 36, 72, 108, 144, 288, 432]\n\nconst emoji = '\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\"'\nexport const font = `\"Phantom Sans\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif,${emoji}`\nexport const mono = 'SFMono-Regular,\"Roboto Mono\",Menlo,monospace'\n\nexport const fontSizes = [13.5, 16, 18, 24, 27, 36, 48, 54, 72, 96]\n\nexport const regular = 'regular'\nexport const bold = 'bold'\n\n// styled-system's `fontWeight` function can hook into the `fontWeights` object\nexport const fontWeights = { regular, bold }\n\nexport const scaleFactor = 17 / 16\nexport const transition = `${3 / 16}s cubic-bezier(0.375, 0, 0.675, 1)`\n\n// styled-system’s `borderRadius` function can hook into the `radii` object/array\nexport const pill = '9999px'\nexport const radii = ['0px', '4px', '8px', '16px', pill]\nexport const radius = '4px'\n\nexport const shadowColor = 'rgba(0,0,0,0.125)'\nexport const baseShadow = '0 0 2px 0 rgba(0,0,0,.0625),'\nexport const boxShadows = [\n  baseShadow + `0 2px 4px 0 ${shadowColor}`,\n  baseShadow + `0 4px 8px 0 ${shadowColor}`,\n  baseShadow + `0 12px 12px 0 ${shadowColor}`,\n  baseShadow + `0 24px 24px 0 ${shadowColor}`\n]\n\nexport const hexa = (color, alpha) => {\n  const hex = cx(color)\n  if (!includes(hex, '#')) return shadowColor\n  const r = parseInt(hex.slice(1, 3), 16),\n    g = parseInt(hex.slice(3, 5), 16),\n    b = parseInt(hex.slice(5, 7), 16)\n\n  if (alpha >= 0) {\n    return `rgba(${r}, ${g}, ${b}, ${alpha})`\n  } else {\n    return `rgb(${r}, ${g}, ${b})`\n  }\n}\n\nexport const gradient = (color1, color2) =>\n  `radial-gradient(\n    ellipse farthest-corner at top left,\n    ${cx(color1)} 0%, ${cx(color2)} 100%\n  )`\n\nconst theme = {\n  breakpoints,\n  mediaQueries,\n  space,\n  mono,\n  font,\n  fontSizes,\n  fontWeights,\n  regular,\n  bold,\n  colors,\n  radii,\n  radius,\n  pill,\n  scaleFactor,\n  transition,\n  boxShadows,\n  shadowColor,\n  cx,\n  hexa,\n  gradient\n}\n\nexport default theme\n"
  },
  {
    "path": "test-setup.js",
    "content": "import 'jest-styled-components'\nimport Enzyme from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n\nEnzyme.configure({ adapter: new Adapter() })\n\n"
  }
]