[
  {
    "path": ".github/workflows/main.yml",
    "content": "name: CI\n\non: [push]\n\njobs:\n  build:\n\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@master\n\n      - name: Install Node.js 12.x\n        uses: actions/setup-node@master\n        with:\n          node-version: 12.x\n\n      - uses: actions/cache@preview\n        with:\n          path: ~/.cache/yarn\n          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}\n          restore-keys: |\n            ${{ runner.os }}-yarn-\n\n      - name: Install dependencies\n        run: yarn install --frozen-lockfile\n\n      - name: Lint\n        run: yarn run lint\n\n      - name: Typecheck\n        run: yarn tsc\n\n      - name: Build\n        run: yarn run build\n\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\n.vscode\ndist\n.rts2_cache_*\n.storybook-dist"
  },
  {
    "path": ".npmignore",
    "content": ".storybook\nnode_modules\n.DS_Store\n.vscode\n.rts2_cache_*\n.storybook-dist\nnow.json"
  },
  {
    "path": ".prettierrc",
    "content": "{}"
  },
  {
    "path": ".storybook/addons.js",
    "content": "import \"@storybook/addon-actions/register\";\nimport \"@storybook/addon-links/register\";\nimport \"@storybook/addon-storysource/register\";\nimport \"@storybook/addon-viewport/register\";\n"
  },
  {
    "path": ".storybook/config.js",
    "content": "import React from \"react\";\nimport prettyFormat from \"pretty-format\";\nimport { configure, addDecorator } from \"@storybook/react\";\nimport { setDefaults } from \"react-storybook-addon-props-combinations\";\nimport \"@storybook/addon-console\";\nimport { BaseStyles } from \"../src\";\n\naddDecorator(storyFn => (\n  <>\n    <BaseStyles />\n    {storyFn()}\n  </>\n));\n\n// automatically import all files ending in *.stories.js\nconst req = require.context(\"../src\", true, /\\.stories\\.(js|tsx?)$/);\nfunction loadStories() {\n  req.keys().forEach(filename => req(filename));\n}\n\nsetDefaults({\n  CombinationRenderer: ({ Component, props }) => {\n    const el = <Component {...props} />;\n    return (\n      <div\n        style={{\n          display: \"inline-block\",\n          border: \"1px solid #E9ECF0\",\n          borderRadius: \"3px\",\n          margin: \"16px\",\n          boxShadow: \"0px 1px 8px rgba(0, 0, 0, 0.08)\"\n        }}\n      >\n        <div\n          style={{\n            padding: \"24px\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            justifyContent: \"center\"\n          }}\n        >\n          {el}\n        </div>\n        <pre\n          style={{\n            padding: \"24px\",\n            background: \"#002b36\",\n            color: \"#93a1a1\",\n            margin: 0,\n            borderRadius: \"0 0 3px 3px\"\n          }}\n        >\n          {prettyFormat(el, {\n            plugins: [prettyFormat.plugins.ReactElement]\n          })}\n        </pre>\n      </div>\n    );\n  }\n});\n\nconfigure(loadStories, module);\n"
  },
  {
    "path": ".storybook/webpack.config.js",
    "content": "module.exports = ({ config, mode }) => {\n  config.module.rules.push({\n    test: /\\.tsx?$/,\n    use: [\n      {\n        loader: require.resolve(\"babel-loader\"),\n        options: {\n          presets: [[\"react-app\", { flow: false, typescript: true }]]\n        }\n      }\n    ]\n  });\n  config.resolve.extensions.push(\".ts\", \".tsx\");\n  config.module.rules.push({\n    test: /\\.stories\\.tsx?$/,\n    loaders: [\n      {\n        loader: require.resolve(\"@storybook/addon-storysource/loader\"),\n        options: { parser: \"typescript\" }\n      }\n    ],\n    enforce: \"pre\"\n  });\n  return config;\n};\n"
  },
  {
    "path": ".yarnclean",
    "content": "@types/react-native"
  },
  {
    "path": "README.md",
    "content": "# `@nice-boys/components`\n\nOur React component library to quickly plug together products. Used in conjunction with our [product-boilerplate](https://github.com/nice-boys/product-boilerplate).\n\n## Documentation\n\n**[Visit the Storybook for examples of all components](https://components.nice-boys.now.sh)**\n\nThis component library is based on:\n\n- [styled-components](https://styled-components.com)\n- [styled-system](https://github.com/jxnblk/styled-system)\n- [rebass](https://rebassjs.org)\n\nRecommended usage is with [rebass](https://rebassjs.org), this library does not re-export those core primitives (Flex, Box, etc).\n\n---\n\n## Contributing\n\n### Local development\n\nWe use Storybook to develop the component library locally. To start Storybook locally, run:\n\n```\nyarn run dev\n```\n\nAny `.stories.js` file will be picked up by Storybook. See their doc on [how to write stories](https://storybook.js.org/docs/basics/writing-stories/) to learn more.\n\n### Using your local version in an app\n\nThere are three steps to use your local version of `@nice-boys/components` in an app for development:\n\n1. **Link `@nice-boys/components` globally**: Run `yarn link` in the `@nice-boys/components` directory to link the package globally (you only have to do that once on your machine)\n2. **Tell your app to use your local version of `@nice-boys/components`**: Run `yarn link @nice-boys/components` in your app directory that depends on the package (you only have to do this once per app)\n3. **Rebuild the components on any change**: Run `yarn run build:watch` in the components dir to make sure the library rebuilds every time you change/add/remove a component\n\nThat's it!\n\n| @nice-boys/components | yourapp                         |\n| --------------------- | ------------------------------- |\n| yarn link             | yarn link @nice-boys/components |\n| yarn run build:watch  | yarn run dev                    |\n\nIf you want to use the remote version in your app again, simply run `yarn unlink @nice-boys/components` in the app directory.\n\n## License\n\nLicensed under the MIT license. Copyright © 2019 Max Stoiber\n"
  },
  {
    "path": "now.json",
    "content": "{\n  \"version\": 2,\n  \"name\": \"@nice-boys/components\",\n  \"alias\": \"components.nice-boys.now.sh\",\n  \"scope\": \"nice-boys\",\n  \"builds\": [\n    {\n      \"src\": \"package.json\",\n      \"use\": \"@now/static-build\",\n      \"config\": { \"distDir\": \".storybook-dist\" }\n    }\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@nice-boys/components\",\n  \"version\": \"0.2.0\",\n  \"description\": \"Nice Boys component library\",\n  \"source\": \"src/index.ts\",\n  \"main\": \"dist/nice-boys-components.js\",\n  \"umd:main\": \"dist/nice-boys-components.umd.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"repository\": \"https://github.com/nice-boys/components\",\n  \"author\": \"Max Stoiber\",\n  \"license\": \"MIT\",\n  \"private\": false,\n  \"scripts\": {\n    \"dev\": \"start-storybook -p 6006\",\n    \"build:watch\": \"microbundle watch --jsx React.createElement\",\n    \"build\": \"microbundle --jsx React.createElement\",\n    \"lint\": \"eslint src --ext .js,.ts,.tsx\",\n    \"test\": \"yarn run lint\",\n    \"now-build\": \"build-storybook -c .storybook -o .storybook-dist\",\n    \"prepublishOnly\": \"yarn run build\"\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"lint-staged\"\n    }\n  },\n  \"eslintConfig\": {\n    \"parser\": \"@typescript-eslint/parser\",\n    \"parserOptions\": {\n      \"project\": \"./tsconfig.json\"\n    },\n    \"extends\": [\n      \"eslint:recommended\",\n      \"plugin:@typescript-eslint/recommended\",\n      \"prettier\",\n      \"prettier/@typescript-eslint\",\n      \"react-app\"\n    ],\n    \"plugins\": [\n      \"react-hooks\"\n    ],\n    \"rules\": {\n      \"@typescript-eslint/explicit-function-return-type\": 0,\n      \"@typescript-eslint/explicit-member-accessibility\": 0,\n      \"@typescript-eslint/no-empty-interface\": 0,\n      \"@typescript-eslint/no-var-requires\": 0,\n      \"react-hooks/rules-of-hooks\": \"error\",\n      \"react-hooks/exhaustive-deps\": \"warn\"\n    }\n  },\n  \"lint-staged\": {\n    \"*.{js,ts,tsx}\": [\n      \"eslint --fix\",\n      \"prettier --write\",\n      \"git add\"\n    ],\n    \"*.{css,json,md,mdx}\": [\n      \"prettier --write\",\n      \"git add\"\n    ]\n  },\n  \"peerDependencies\": {\n    \"react\": \">= 15.0.0\",\n    \"styled-components\": \">= 4.0.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.4.5\",\n    \"@storybook/addon-actions\": \"5.0.11\",\n    \"@storybook/addon-console\": \"^1.1.0\",\n    \"@storybook/addon-info\": \"5.0.11\",\n    \"@storybook/addon-links\": \"5.0.11\",\n    \"@storybook/addon-storysource\": \"5.0.11\",\n    \"@storybook/addon-viewport\": \"5.0.11\",\n    \"@storybook/addons\": \"5.0.11\",\n    \"@storybook/react\": \"5.0.11\",\n    \"@types/react\": \"^16.8.19\",\n    \"@types/rebass\": \"^3.0.4\",\n    \"@types/storybook__react\": \"^4.0.1\",\n    \"@types/styled-components\": \"^4.4.0\",\n    \"@types/styled-system\": \"^4.2.1\",\n    \"@typescript-eslint/eslint-plugin\": \"^1.6.0\",\n    \"@typescript-eslint/parser\": \"^1.6.0\",\n    \"babel-eslint\": \"^10.0.1\",\n    \"babel-loader\": \"^8.0.6\",\n    \"eslint\": \"^5.16.0\",\n    \"eslint-config-prettier\": \"^6.11.0\",\n    \"eslint-config-react-app\": \"^3.0.8\",\n    \"eslint-loader\": \"3.0.2\",\n    \"eslint-plugin-flowtype\": \"2.50.1\",\n    \"eslint-plugin-import\": \"2.14.0\",\n    \"eslint-plugin-jsx-a11y\": \"6.1.2\",\n    \"eslint-plugin-react\": \"7.16.0\",\n    \"eslint-plugin-react-hooks\": \"^1.6.0\",\n    \"husky\": \"^3.1.0\",\n    \"lint-staged\": \"^9.4.3\",\n    \"microbundle\": \"^0.11.0\",\n    \"prettier\": \"^1.17.1\",\n    \"react\": \"^16.8.6\",\n    \"react-docgen-typescript-loader\": \"^3.1.0\",\n    \"react-storybook-addon-props-combinations\": \"^1.1.0\",\n    \"styled-components\": \"^4.2.0\"\n  },\n  \"dependencies\": {\n    \"@tippy.js/react\": \"^2.2.0\",\n    \"react-feather\": \"^2.0.3\",\n    \"rebass\": \"^3.x.x\",\n    \"styled-normalize\": \"^8.x.x\",\n    \"styled-system\": \"^4.x.x\"\n  }\n}\n"
  },
  {
    "path": "src/BaseStyles/BaseStyles.stories.tsx",
    "content": "import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { BaseStyles } from \"./\";\n\nstoriesOf(\"BaseStyles\", module).add(\"Global\", () => (\n  <>\n    <BaseStyles />\n    This component sets the base styles, including normalize.css (see the grey\n    background and no margin of the whole page)\n  </>\n));\n"
  },
  {
    "path": "src/BaseStyles/index.tsx",
    "content": "import { createGlobalStyle } from \"styled-components\";\nimport normalize from \"styled-normalize\";\nimport { theme } from \"../theme\";\n\nexport const BaseStyles = createGlobalStyle`\n  ${normalize}\n  html {\n    font-size: 16px;\n    line-height: 1.5;\n    background-color: ${theme.ui.wash};\n    color: ${theme.text.primary};\n    padding: 0;\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,\n      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  }\n  html,\n  body,\n  #__next {\n    height: 100%;\n  }\n`;\n"
  },
  {
    "path": "src/Button/Button.stories.tsx",
    "content": "import { storiesOf } from \"@storybook/react\";\nimport withPropsCombinations from \"react-storybook-addon-props-combinations\";\nimport { action } from \"@storybook/addon-actions\";\nimport {\n  PrimaryButton,\n  DangerButton,\n  GhostButton,\n  JoinButton,\n  OutlineButton,\n  TabButton,\n  TextButton\n} from \"./\";\n\nstoriesOf(\"Buttons\", module)\n  .add(\n    \"Primary\",\n    withPropsCombinations(PrimaryButton, {\n      children: [\"Click me\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Ghost\",\n    withPropsCombinations(GhostButton, {\n      children: [\"Potential click\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Outline\",\n    withPropsCombinations(OutlineButton, {\n      children: [\"Potential click\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Text\",\n    withPropsCombinations(TextButton, {\n      children: [\"Potential click\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Tab\",\n    withPropsCombinations(TabButton, {\n      children: [\"Potential click\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Join\",\n    withPropsCombinations(JoinButton, {\n      children: [\"Join\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  )\n  .add(\n    \"Danger\",\n    withPropsCombinations(DangerButton, {\n      children: [\"Careful\"],\n      size: [\"small\", undefined, \"large\"],\n      disabled: [true, false],\n      onClick: [action(\"click\")]\n    })\n  );\n"
  },
  {
    "path": "src/Button/Danger.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button<ButtonProps>`\n  ${styles.base};\n  background: linear-gradient(\n    to top,\n    ${theme.accent.error.seven},\n    ${theme.accent.error.six}\n  );\n  border: 1px solid ${theme.accent.error.seven};\n  color: ${theme.lights.six};\n  &:hover {\n    ${styles.hover};\n    background: linear-gradient(\n      to top,\n      ${theme.accent.error.six},\n      ${theme.accent.error.five}\n    );\n  }\n  &:active {\n    ${styles.active};\n    background: linear-gradient(\n      to top,\n      ${theme.accent.error.five},\n      ${theme.accent.error.six}\n    );\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.ui.wash},\n      0 0 0 3px ${theme.accent.error.border};\n  }\n`;\n\nexport const DangerButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Ghost.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button`\n  ${styles.base};\n  background: linear-gradient(\n    to top,\n    ${theme.lights.five},\n    ${theme.lights.six}\n  );\n  color: ${theme.text.tertiary};\n  border: 1px solid ${theme.lights.three};\n  &:hover {\n    ${styles.hover};\n    background: linear-gradient(\n      to top,\n      ${theme.lights.five},\n      ${theme.lights.six}\n    );\n    color: ${theme.text.primary};\n    border: 1px solid ${theme.lights.three};\n  }\n  &:active {\n    ${styles.active};\n    background: linear-gradient(\n      to top,\n      ${theme.lights.six},\n      ${theme.lights.five}\n    );\n    border: 1px solid ${theme.lights.three};\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.lights.six}, 0 0 0 3px ${theme.lights.three};\n    border: 1px solid ${theme.lights.four};\n  }\n`;\n\nexport const GhostButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Join.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button`\n  ${styles.base};\n  background: linear-gradient(\n    to top,\n    ${theme.accent.success.seven},\n    ${theme.accent.success.six}\n  );\n  border: 1px solid ${theme.accent.success.seven};\n  color: ${theme.lights.six};\n  &:hover {\n    ${styles.hover};\n    background: linear-gradient(\n      to top,\n      ${theme.accent.success.six},\n      ${theme.accent.success.five}\n    );\n  }\n  &:active {\n    ${styles.active};\n    background: linear-gradient(\n      to top,\n      ${theme.accent.success.five},\n      ${theme.accent.success.six}\n    );\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.ui.wash},\n      0 0 0 3px ${theme.accent.success.border};\n  }\n`;\n\nexport const JoinButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Outline.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button`\n  ${styles.base};\n  background: none;\n  border: 1px solid ${theme.lights.three};\n  color: ${theme.text.tertiary};\n  box-shadow: none;\n  &:hover {\n    ${styles.hover};\n    color: ${theme.text.primary};\n    border: 1px solid ${theme.lights.two};\n    background: none;\n    box-shadow: none;\n  }\n  &:active {\n    ${styles.active};\n    border: 1px solid ${theme.lights.two};\n    background: none;\n  }\n  &:focus {\n    ${styles.focus};\n    border: 1px solid ${theme.lights.two};\n    box-shadow: 0 0 0 1px ${theme.ui.wash}, 0 0 0 3px ${theme.lights.three};\n  }\n`;\n\nexport const OutlineButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Primary.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button<ButtonProps>`\n  ${styles.base};\n  background: linear-gradient(to top, ${theme.brand.seven}, ${theme.brand.six});\n  border: 1px solid ${theme.brand.seven};\n  color: ${theme.lights.six};\n  &:hover {\n    ${styles.hover};\n    background: linear-gradient(\n      to top,\n      ${theme.brand.six},\n      ${theme.brand.five}\n    );\n  }\n  &:active {\n    ${styles.active};\n    background: linear-gradient(\n      to top,\n      ${theme.brand.five},\n      ${theme.brand.six}\n    );\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.ui.wash}, 0 0 0 3px ${theme.brand.border};\n  }\n`;\n\nexport const PrimaryButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Tab.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button`\n  ${styles.base};\n  background: linear-gradient(to top, ${theme.darks.zero}, ${theme.darks.one});\n  border: 1px solid ${theme.darks.zero};\n  color: ${theme.lights.five};\n  &:hover {\n    ${styles.hover};\n    color: ${theme.lights.six};\n    background: linear-gradient(\n      to top,\n      ${theme.darks.zero},\n      ${theme.darks.one}\n    );\n  }\n  &:active {\n    ${styles.active};\n    background: linear-gradient(\n      to top,\n      ${theme.darks.zero},\n      ${theme.darks.zero}\n    );\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.ui.wash}, 0 0 0 3px ${theme.lights.one};\n  }\n`;\n\nexport const TabButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/Text.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { theme } from \"../theme\";\nimport {\n  styles,\n  getPaddingFromSize,\n  getFontSizeFromSize,\n  ButtonProps\n} from \"./base\";\n\nconst Button = styled.button`\n  ${styles.base};\n  background: none;\n  color: ${theme.brand.six};\n  box-shadow: none;\n  padding-left: 0;\n  padding-right: 0;\n  &:hover {\n    ${styles.hover};\n    color: ${theme.brand.nine};\n    background: none;\n    box-shadow: none;\n  }\n  &:active {\n    ${styles.active};\n    background: none;\n  }\n  &:focus {\n    ${styles.focus};\n    box-shadow: 0 0 0 1px ${theme.ui.wash}, 0 0 0 3px ${theme.lights.three};\n  }\n`;\n\nexport const TextButton = (props: ButtonProps) => {\n  const { size } = props;\n  const { py, px } = getPaddingFromSize(size);\n  const fontSize = getFontSizeFromSize(size);\n  return <Button {...props} py={py} px={px} fontSize={fontSize} />;\n};\n"
  },
  {
    "path": "src/Button/base.tsx",
    "content": "import React, { ButtonHTMLAttributes } from \"react\";\nimport { css } from \"styled-components\";\nimport {\n  space,\n  width,\n  style,\n  getPx,\n  SpaceProps,\n  WidthProps,\n  FontSizeProps\n} from \"styled-system\";\nimport { theme } from \"../theme\";\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    SpaceProps,\n    WidthProps,\n    FontSizeProps {\n  // href?: string;\n  children: React.ReactNode;\n  size?: \"large\" | \"small\";\n}\n\nexport interface PaddingType {\n  py: number;\n  px: number;\n}\n\nexport const getPaddingFromSize = (size: ButtonProps[\"size\"]): PaddingType => {\n  const defaults = { py: 2, px: 3 };\n\n  switch (size) {\n    case \"small\":\n      return { py: 1, px: 2 };\n    case \"large\":\n      return { py: 3, px: 5 };\n    default:\n      return defaults;\n  }\n};\n\nexport const getFontSizeFromSize = (size: ButtonProps[\"size\"]): number => {\n  switch (size) {\n    case \"small\":\n      return 0;\n    case \"large\":\n      return 2;\n    default:\n      return 1;\n  }\n};\n\nconst fontSize = style({\n  // React prop name\n  prop: \"fontSize\",\n  // The corresponding CSS property (defaults to prop argument)\n  cssProperty: \"fontSize\",\n  // key for theme values\n  key: \"fontSizes\",\n  // accessor function for transforming the value\n  transformValue: getPx,\n  // add a fallback scale object or array, if theme is not present\n  scale: [13, 15, 17, 20, 24]\n});\n\nconst focus = css`\n  box-shadow: 0 0 0 1px ${theme.lights.six}, 0 0 0 3px ${theme.ui.border};\n  outline: none;\n`;\n\nconst active = css`\n  border: 1px solid transparent;\n`;\n\nconst hover = css<ButtonProps>`\n  box-shadow: ${props => (props.disabled ? \"none\" : theme.shadow.medium)};\n  transition: all ${theme.animation.in};\n`;\n\nconst base = css<ButtonProps>`\n  ${space};\n  ${width};\n  ${fontSize};\n  -webkit-appearance: none;\n  white-space: nowrap;\n  word-break: keep-all;\n  cursor: pointer;\n  line-height: 1;\n  position: relative;\n  text-align: center;\n  background: linear-gradient(\n    to top,\n    ${theme.lights.five},\n    ${theme.lights.six}\n  );\n  border: 1px solid transparent;\n  box-shadow: ${props => (props.disabled ? \"none\" : theme.shadow.small)};\n  border-radius: 4px;\n  transition: all ${theme.animation.out};\n  opacity: ${props => (props.disabled ? \"0.64\" : \"1\")};\n  font-weight: 500;\n  text-decoration: none;\n  display: inline-block;\n  &:hover {\n    ${hover};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:active {\n    ${active}\n  }\n  &:focus {\n    ${focus};\n  }\n`;\n\nexport const styles = {\n  base,\n  focus,\n  active,\n  hover\n};\n"
  },
  {
    "path": "src/Button/index.tsx",
    "content": "export * from \"./Primary\";\nexport * from \"./Danger\";\nexport * from \"./Ghost\";\nexport * from \"./Join\";\nexport * from \"./Outline\";\nexport * from \"./Tab\";\nexport * from \"./Text\";\n"
  },
  {
    "path": "src/Card/Card.stories.tsx",
    "content": "import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Card, CardTitle } from \"./\";\nimport { Flex } from \"rebass\";\n\nstoriesOf(\"Card\", module).add(\"Default\", () => (\n  <Flex justifyContent=\"center\" m={4}>\n    <Card width={0.5}>\n      <CardTitle>This is a card!</CardTitle>\n    </Card>\n  </Flex>\n));\n"
  },
  {
    "path": "src/Card/Card.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Flex, Heading, HeadingProps } from \"rebass\";\nimport { theme } from \"../theme\";\n\nconst Card = styled(Flex).attrs(props => ({\n  p: props.p || 3,\n  flexDirection: props.flexDirection || \"column\"\n}))`\n  border-radius: 4px;\n  background-color: ${theme.ui.cardWash};\n  box-shadow: ${theme.shadow.large};\n`;\n\nconst CardTitle = (props: HeadingProps) => (\n  <Heading as={\"h1\"} fontSize={3} {...props} />\n);\n\nexport { Card, CardTitle };\n"
  },
  {
    "path": "src/Card/index.tsx",
    "content": "export * from \"./Card\";\n"
  },
  {
    "path": "src/Nav/Nav.stories.tsx",
    "content": "import React from \"react\";\nimport { Flex, Box } from \"rebass\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Nav } from \"./Nav\";\nimport { PrimaryButton } from \"../Button\";\n\nconst ChangefeedNav = () => (\n  <div style={{ height: \"200vh\" }}>\n    <Nav>\n      <Box pr={3}>\n        <strong>Some</strong>product\n      </Box>\n      <Nav.Content>\n        <Flex flexDirection={[\"column\", \"row\", \"row\"]}>\n          <Nav.Item href=\"#\">About</Nav.Item>\n          <Nav.Item href=\"#\">Our Story</Nav.Item>\n          <Nav.Item href=\"#\">Pricing</Nav.Item>\n        </Flex>\n        <Flex\n          pt={[2, 0]}\n          pb={[3, 0]}\n          justifyContent={[\"center\", \"\"]}\n          width={[1, \"auto\"]}\n        >\n          <PrimaryButton>Get started</PrimaryButton>\n        </Flex>\n      </Nav.Content>\n    </Nav>\n\n    <h1>Navbar</h1>\n  </div>\n);\n\nstoriesOf(\"Nav\", module)\n  .add(\"Desktop\", ChangefeedNav)\n  .add(\"Mobile\", ChangefeedNav, { viewport: { defaultViewport: \"iphonex\" } });\n"
  },
  {
    "path": "src/Nav/Nav.tsx",
    "content": "import React from \"react\";\nimport { Wrapper } from \"./components/Wrapper\";\nimport { Navbar } from \"./components/Navbar\";\nimport { Item } from \"./components/Item\";\nimport { Content } from \"./components/Content\";\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nconst Nav = (props: Props) => {\n  return (\n    <Wrapper mb={3}>\n      <Navbar {...props}>{props.children}</Navbar>\n    </Wrapper>\n  );\n};\n\nNav.Item = Item;\nNav.Content = Content;\n\nexport { Nav };\n"
  },
  {
    "path": "src/Nav/components/Content.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Flex, FlexProps } from \"rebass\";\nimport { defaultBreakpoints } from \"styled-system\";\nimport { ChevronDown } from \"react-feather\";\nimport { theme } from \"../../theme\";\n\nconst Mobile = styled(Flex)<FlexProps>`\n  display: none;\n  @media screen and (max-width: ${defaultBreakpoints[0]}) {\n    display: flex;\n  }\n`;\n\nconst Desktop = styled(Flex)<FlexProps>`\n  @media screen and (max-width: ${defaultBreakpoints[0]}) {\n    display: none;\n  }\n`;\n\nconst MobileExpandedWrapper = styled(Flex)`\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  height: 100vh;\n  left: 0;\n  background: rgba(0, 0, 0, 0.1);\n`;\n\nconst MobileExpandedCard = styled(Flex)`\n  position: absolute;\n  background: white;\n  top: 0;\n`;\n\nconst UnstyledButton = styled.button`\n  padding: 0;\n  margin: 0;\n  background: none;\n  border: none;\n  outline: none;\n`;\n\nexport const Content = (props: FlexProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <>\n      <Desktop\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        width={1}\n        {...props}\n        ref={undefined}\n      />\n      <Mobile\n        flexDirection=\"row\"\n        justifyContent=\"flex-end\"\n        alignItems=\"center\"\n        width={1}\n      >\n        <UnstyledButton onClick={() => setIsOpen(!isOpen)}>\n          <ChevronDown\n            style={{\n              transform: `rotate(${isOpen ? `180deg` : `0deg`})`,\n              transition: `transform 100ms ease-in-out`\n            }}\n            color={theme.darks.six}\n          />\n        </UnstyledButton>\n        {isOpen && (\n          <MobileExpandedWrapper onClick={() => setIsOpen(false)}>\n            <MobileExpandedCard flexDirection=\"column\" width={1}>\n              {props.children}\n            </MobileExpandedCard>\n          </MobileExpandedWrapper>\n        )}\n      </Mobile>\n    </>\n  );\n};\n"
  },
  {
    "path": "src/Nav/components/Item.tsx",
    "content": "import React from \"react\";\nimport styled from \"styled-components\";\nimport { Box, LinkProps, Flex } from \"rebass\";\nimport { theme } from \"../../theme\";\nimport { defaultBreakpoints } from \"styled-system\";\nimport { ChevronRight } from \"react-feather\";\n\nconst Mobile = styled(Box)`\n  display: none;\n  @media screen and (max-width: ${defaultBreakpoints[0]}) {\n    display: flex;\n  }\n`;\n\nconst Link = styled(Flex).attrs(props => ({\n  as: props.as || \"a\"\n}))`\n  color: ${theme.darks.zero};\n  text-decoration: none;\n  background-color: transparent;\n  transition: background 100ms ease-out;\n  padding: 8px 16px;\n  border-radius: 4px;\n  line-height: normal;\n  cursor: pointer;\n\n  :hover {\n    background-color: ${theme.lights.four};\n  }\n\n  :active,\n  :focus {\n    color: ${theme.darks.zero};\n  }\n\n  @media screen and (max-width: ${defaultBreakpoints[0]}) {\n    border-bottom: 1px solid ${theme.ui.border};\n    padding: 16px 0;\n    margin: 0px 16px;\n\n    svg {\n      transition: transform 100ms ease-in-out;\n    }\n\n    &:hover {\n      background-color: transparent;\n    }\n\n    &:hover svg {\n      transform: translateX(2px);\n    }\n\n    &:last-of-type {\n      border-bottom: none;\n    }\n  }\n`;\n\nexport const Item = (props: LinkProps) => {\n  return (\n    // @ts-ignore\n    <Link\n      justifyContent={[\"space-between\", \"initial\"]}\n      alignItems=\"center\"\n      {...props}\n      ref={undefined}\n    >\n      {props.children}\n      <Mobile style={{ height: \"1em\" }}>\n        <ChevronRight size=\"1.5em\" color={theme.darks.six} />\n      </Mobile>\n    </Link>\n  );\n};\n"
  },
  {
    "path": "src/Nav/components/Navbar.tsx",
    "content": "import styled from \"styled-components\";\nimport { Flex } from \"rebass\";\nimport { theme } from \"../../theme\";\n\nexport const Navbar = styled(Flex).attrs({\n  flexDirection: \"row\",\n  alignItems: \"center\",\n  p: 3\n})({\n  backgroundColor: \"white\",\n  boxShadow: theme.shadow.large,\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  right: 0,\n  zIndex: 99\n});\n"
  },
  {
    "path": "src/Nav/components/Wrapper.tsx",
    "content": "import styled from \"styled-components\";\nimport { Flex } from \"rebass\";\n\nexport const Wrapper = styled(Flex)({ position: \"relative\", height: \"65px\" });\n"
  },
  {
    "path": "src/Nav/index.tsx",
    "content": "export * from \"./Nav\";\n"
  },
  {
    "path": "src/Spinner/Donut.tsx",
    "content": "import styled, { keyframes } from \"styled-components\";\nimport { Box } from \"rebass\";\nimport { theme } from \"../theme\";\n\nconst donutSpin = keyframes`\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n`;\n\nexport default styled(Box)`\n  animation: ${donutSpin} 800ms linear infinite;\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: ${theme.text.primary};\n  border-radius: 50%;\n  height: 30px;\n  width: 30px;\n`;\n"
  },
  {
    "path": "src/Spinner/Spinner.stories.tsx",
    "content": "import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Spinner } from \"./\";\n\nstoriesOf(\"Spinner\", module).add(\"Default\", () => <Spinner />);\n"
  },
  {
    "path": "src/Spinner/Spinner.tsx",
    "content": "import React from \"react\";\nimport { Flex, FlexProps } from \"rebass\";\nimport Donut from \"./Donut\";\n\nexport const Spinner = React.forwardRef((props: FlexProps, ref) => (\n  <Flex\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    css={{ height: \"100%\" }}\n    ref={ref}\n    {...props}\n  >\n    <Donut />\n  </Flex>\n));\n"
  },
  {
    "path": "src/Spinner/index.tsx",
    "content": "export * from \"./Spinner\";\n"
  },
  {
    "path": "src/Tooltip/Tooltip.stories.tsx",
    "content": "import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport withPropsCombinations from \"react-storybook-addon-props-combinations\";\nimport { Tooltip } from \"./Tooltip\";\nimport { PrimaryButton } from \"../Button\";\n\nstoriesOf(\"Tooltip\", module).add(\n  \"Default\",\n  withPropsCombinations(Tooltip, {\n    children: [<PrimaryButton>Button</PrimaryButton>],\n    placement: [\"top\", \"bottom\", \"left\", \"right\"],\n    content: [\"Tooltip text\"]\n  })\n);\n"
  },
  {
    "path": "src/Tooltip/Tooltip.tsx",
    "content": "import React from \"react\";\nimport Tippy from \"@tippy.js/react\";\n\ninterface TooltipProps {\n  content: string | React.ReactNode;\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  style?: object;\n  children: React.ReactElement<any>;\n}\n\nexport const Tooltip = (props: TooltipProps) => {\n  const { style = {}, placement = \"top\", content, children, ...rest } = props;\n\n  return (\n    <Tippy\n      touch={false}\n      arrow={true}\n      arrowType={\"round\"}\n      hideOnClick={false}\n      placement={placement}\n      content={\n        <span style={{ fontSize: \"14px\", fontWeight: 600, ...style }}>\n          {content}\n        </span>\n      }\n      // https://github.com/FezVrasta/popper.js/issues/535\n      popperOptions={{\n        modifiers: {\n          preventOverflow: {\n            boundariesElement: \"window\"\n          }\n        }\n      }}\n      {...rest}\n    >\n      <span>{children}</span>\n    </Tippy>\n  );\n};\n"
  },
  {
    "path": "src/Tooltip/index.tsx",
    "content": "export * from \"./Tooltip\";\n"
  },
  {
    "path": "src/index.ts",
    "content": "export * from \"./Button\";\nexport * from \"./theme\";\nexport * from \"./BaseStyles\";\nexport * from \"./Tooltip\";\nexport * from \"./Spinner\";\nexport * from \"./Nav\";\nexport * from \"./Card\";\n"
  },
  {
    "path": "src/theme.ts",
    "content": "const darks = {\n  zero: \"#000\",\n  one: \"#161718\",\n  two: \"#2C2E30\",\n  three: \"#44474A\",\n  four: \"#5B5F63\",\n  five: \"#73787D\",\n  six: \"#8A9096\",\n  seven: \"#A1A9B0\"\n};\n\nconst lights = {\n  one: \"#BBC2C9\",\n  two: \"#D3DBE3\",\n  three: \"#E9ECF0\",\n  four: \"#F2F5F7\",\n  five: \"#FAFBFC\",\n  six: \"#FFF\"\n};\n\nconst brand = {\n  one: \"#D4E8FC\",\n  two: \"#ABD3FC\",\n  three: \"#83BFFC\",\n  four: \"#5BABFC\",\n  five: \"#1A8CFF\",\n  six: \"#007EFC\",\n  seven: \"#0071E3\",\n  eight: \"#0065C9\",\n  nine: \"#0058B0\",\n  ten: \"#004B96\",\n  eleven: \"#003E7D\"\n};\n\nconst error = {\n  one: \"#FFE3E3\",\n  two: \"#F7C3C3\",\n  three: \"#F09C9C\",\n  four: \"#E87171\",\n  five: \"#F05151\",\n  six: \"#E84444\",\n  seven: \"#DF4040\",\n  eight: \"#B53535\",\n  nine: \"#9C2E2E\",\n  ten: \"#822626\",\n  eleven: \"#691F1F\"\n};\n\nconst success = {\n  one: \"#E4F5EC\",\n  two: \"#C5EBD6\",\n  three: \"#A2DBBD\",\n  four: \"#75D9A3\",\n  five: \"#5BCF90\",\n  six: \"#44C881\",\n  seven: \"#40BD79\",\n  eight: \"#32945F\",\n  nine: \"#2D8556\",\n  ten: \"#28754C\",\n  eleven: \"#21613F\"\n};\n\nconst warn = {\n  one: \"#FFF0D4\",\n  two: \"#FFE2AB\",\n  three: \"#FFD687\",\n  four: \"#FFCE6E\",\n  five: \"#FFC554\",\n  six: \"#FFBC3B\",\n  seven: \"#E5A935\",\n  eight: \"#CC972F\",\n  nine: \"#B28429\",\n  ten: \"#996C14\",\n  eleven: \"#66480D\"\n};\n\nexport const theme = {\n  darks,\n  lights,\n  brand: {\n    ...brand,\n    default: brand.six,\n    text: brand.eleven,\n    wash: brand.one,\n    border: brand.two\n  },\n  text: {\n    primary: darks.one,\n    secondary: darks.two,\n    tertiary: darks.three\n  },\n  ui: {\n    wash: lights.four,\n    cardWash: lights.five,\n    border: lights.three\n  },\n  accent: {\n    error: {\n      ...error,\n      default: error.six,\n      text: error.eleven,\n      wash: error.one,\n      border: error.two\n    },\n    success: {\n      ...success,\n      default: success.six,\n      text: success.eleven,\n      wash: success.one,\n      border: success.two\n    },\n    warn: {\n      ...warn,\n      default: warn.six,\n      text: warn.eleven,\n      wash: warn.one,\n      border: warn.two\n    }\n  },\n  shadow: {\n    small: \"0px 1px 2px rgba(0, 0, 0, 0.02)\",\n    medium: \"0px 1px 4px rgba(0, 0, 0, 0.04)\",\n    large: \"0px 1px 8px rgba(0, 0, 0, 0.08)\"\n  },\n  animation: {\n    in: \"0.2s ease-in\",\n    out: \"0.2s ease-out\"\n  }\n};\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true,\n    \"jsx\": \"preserve\",\n    \"lib\": [\"dom\", \"es2017\"],\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"noEmit\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noImplicitAny\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noImplicitThis\": true,\n    \"preserveConstEnums\": true,\n    \"removeComments\": false,\n    \"sourceMap\": true,\n    \"strict\": true,\n    \"target\": \"esnext\"\n  }\n}\n"
  },
  {
    "path": "types/@storybook/addon-actions.d.ts",
    "content": "declare module \"@storybook/addon-actions\";\n"
  },
  {
    "path": "types/react-storybook-addons-props-combinations.d.ts",
    "content": "declare module \"react-storybook-addon-props-combinations\";\n"
  },
  {
    "path": "types/styled-normalize.d.ts",
    "content": "declare module \"styled-normalize\" {\n  const normalize: string;\n\n  export default normalize;\n}\n"
  }
]