[
  {
    "path": ".github/workflows/core-tests.yml",
    "content": "name: Core tests\non: \n  push:\n    paths:\n      - packages/core/**\n  pull_request:\n    paths:\n      - packages/core/**\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      \n      - name: Cache node modules\n        uses: actions/cache@v2\n        env:\n          cache-name: cache-node-modules\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n          restore-keys: |\n            ${{ runner.os }}-build-${{ env.cache-name }}-\n            ${{ runner.os }}-build-\n            ${{ runner.os }}-\n            \n      - name: Setup Node.js    \n        uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          \n      - name: Install dependencies\n        run: yarn\n        \n      - name: Run the compiler\n        run: yarn --cwd packages/core rescript build\n        \n      - name: Run the tests\n        run: yarn --cwd packages/core test\n"
  },
  {
    "path": ".github/workflows/create-version.yml",
    "content": "name: Create version\n\non:\n  workflow_dispatch:\n    inputs:\n      packageName:\n        description: Package name\n        required: true\n        default: \"core\"\n        type: choice\n        options:\n          - core\n          - ui\n          - css\n          - bindings\n      versionType:\n        description: Version type\n        required: true\n        default: \"patch\"\n        type: choice\n        options:\n          - patch\n          - minor\n          - major\n          - premajor\n          - preminor\n          - prepatch\n          - prerelease\n\njobs:\n  create-version:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n        with:\n          ssh-key: ${{ secrets.ADMIN_SSH_KEY }}\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 16\n      - run: |\n          git config user.name rescriptbr-admin\n          git config user.email rescriptbr@gmail.com\n\n      - name: Generate new version ${{ github.event.inputs.versionType }}\n        run: |\n          yarn config set version-tag-prefix \"@ancestor-ui/${{ github.event.inputs.packageName }}@\"\n          cd packages/${{ github.event.inputs.packageName }}\n          yarn version --${{ github.event.inputs.versionType }}\n\n      - name: Push the tags\n        run: git push origin main --tags\n"
  },
  {
    "path": ".github/workflows/css-tests.yml",
    "content": "name: CSS tests\non: \n  push:\n    paths:\n      - packages/css/**\n  pull_request:\n    paths:\n      - packages/css/**\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      \n      - name: Cache node modules\n        uses: actions/cache@v2\n        env:\n          cache-name: cache-node-modules\n        with:\n          path: ~/.npm\n          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}\n          restore-keys: |\n            ${{ runner.os }}-build-${{ env.cache-name }}-\n            ${{ runner.os }}-build-\n            ${{ runner.os }}-\n            \n      - name: Setup Node.js    \n        uses: actions/setup-node@v2\n        with:\n          node-version: 18\n          \n      - name: Install dependencies\n        run: yarn\n        \n      - name: Run the compiler\n        run: yarn --cwd packages/css rescript build\n        \n      - name: Run the tests\n        run: yarn --cwd packages/css test\n"
  },
  {
    "path": ".github/workflows/npm-publish.yml",
    "content": "name: Publish package on NPM\n\non:\n  workflow_dispatch:\n    inputs:\n      packageName:\n        description: Package name\n        required: true\n        default: \"core\"\n        type: choice\n        options:\n          - core\n          - ui\n          - css\n          - bindings\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v2\n        with:\n          node-version: 16\n          registry-url: https://registry.npmjs.org/\n      - run: cd packages/${{ github.event.inputs.packageName }} && npm publish --access=public\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}\n"
  },
  {
    "path": ".gitignore",
    "content": "*.exe\n*.obj\n*.out\n*.compile\n*.native\n*.byte\n*.cmo\n*.annot\n*.cmi\n*.cmx\n*.cmt\n*.cmti\n*.cma\n*.a\n*.cmxa\n*.obj\n*~\n*.annot\n*.cmj\n*.bak\nlib/bs\n*.mlast\n*.mliast\n.vscode\n.merlin\n.bsb.lock\n/node_modules/\n*.bs.js\npackages/core/lib/\npackages/ui/lib/\npackages/bindings/lib/\npackages/css/lib/\npackages/**/node_modules/\n/website/lib/\n/website/node_modules/\n\n.DS_STORE\n"
  },
  {
    "path": ".nvmrc",
    "content": "v18.0.0\n"
  },
  {
    "path": ".tool-versions",
    "content": "nodejs 16.20.0"
  },
  {
    "path": "README.md",
    "content": "> ⚠️ **DISCLAIMER**: Considering the recent changes in the use of CSS in JS with runtime and also the maintenance and adaptation effort of this project to align with the direction the ecosystem is taking in the use of CSS in JS, especially with the advent of RSC and frameworks like Remix and Next, this repository is no longer maintained. Furthermore, there are excellent solid options in the JS ecosystem such as Chakra UI, Panda CSS, and Tailwind that satisfactorily meet requirements and work well with ReScript through bindings.\n\n<p align=\"center\">  \n  <img src=\"https://raw.githubusercontent.com/rescriptbr/ancestor/master/assets/ancestor-logo.svg\" /> \n  <br />\n  <br />\n  <a target=\"_blank\" href=\"https://ancestor.netlify.app\"> Docs </a> //\n    <a target=\"_blank\" href=\"https://ancestor.netlify.app/docs/getting-started\"> Getting Started </a> //\n  <a target=\"_blank\" href=\"https://github.com/rescriptbr\"> ReScript Brazil Community </a>\n </p>\n\n# Introduction\n\n**Ancestor** is a suite of components that works as layout primitives to develop high-quality \nweb apps, design systems, and style guides focused on responsiveness.\n\n## What and Why?\nEvery front-end project that is using libraries based on components like [React](https://reactjs.org), faces the same situation: \n**Choose or develop a UI library to develop the interfaces.**\n\nIn some cases, you can use libraries like [Chakra UI](https://chakra-ui.com/), [Material UI](https://material-ui.com/pt/), or\n[Ant Design](https://material-ui.com/pt/) that delivers a set of styled components (grids, buttons, inputs, selects, etc) \nand a lot of other utility functions and components for your web app.\n\nHowever, in some cases, the team needs to create its own design system or style guide with a design language, colors, fonts, buttons, inputs\nand other specifications created by a design team. In this case, the usage of a library like Material UI or Chakra UI might \nnot be the best choice, because depends on a lot of customizations or changes to adapt the library to the design specification.\n\nIt was the reason that we created Ancestor: **to act as a foundation for your project or design system.**\n\n## Features\n\n### Unstyled 💀\n\nDifferent from popular libraries like Material UI, we don't deliver styled components with colors, fonts, borders, etc. \nAll Ancestor's components are **layout primitives** with support to a lot of CSS properties like padding, margin, height, width, etc.\n\n### Responsiveness 💡\nAll properties from Ancestor's components are responsive, which makes it easy to develop interfaces that need to support multiple devices. \nThrough the **breakpoints** defined by the library, you can change the appearance of a component in a specific device or screen size.\n\n### Consistent design 🎨\nWe don't deliver styled components, but we care about design consistency, especially when dealing with spacing, borders, etc.\n\n### Customizable ⚙️\n\nAll properties from Ancestor's components and parameters are customizable: \nBreakpoints, spacing, radius, grid columns, etc which makes it easy to customize and adapt Ancestor to your design system or style guide.\n\n## Installation\n\n\n> ⚠️ **DISCLAIMER**: We're working on a new version of Ancestor bringing a complete set of UI tools for ReScript. The most stable version is @rescriptbr/ancestor@0.0.8 and you can install by following the instructions below. Don't forget to install the most stable version, there are unstable pre-release versions that might not work as expected since they're pre-releases.\n\nFirst off, install **Ancestor** using npm/yarn:\n\n```sh title=\"Terminal\"\nyarn add @rescriptbr/ancestor@0.8.0\n```\n\nIf you want to use the default setup, you need to install [Emotion](https://emotion.sh).\n\n```sh title=\"Terminal\"\nyarn add @emotion/css\n```\n\nAdd the package to `bs-dependencies` in your `bsconfig.json`:\n\n```json title=\"bsconfig.json\"\n{\n\"bs-dependencies\": [\n  \"@rescript/react\",\n  \"@rescriptbr/ancestor\"\n ]\n}\n\n```\n\n## Basic usage\n\n```rescript\nopen Ancestor.Default\n\n@react.component\nlet make = () => {\n  <Grid height=[#xs(100.0->#pct)]>\n    <Box\n      flexDirection=[#xs(#column), #md(#row)]\n      p=[xxs(6), md(12), lg(8)]\n      position=[#xs(#relative)]\n      columns=[#xs(#12), #md(#6)]\n    >\n      <Box\n        flexGrow=[#xs(#num(1.0))]\n        width=[#xs(15.0->#rem), #md(20.0->#rem)]\n      >\n        <Logo />\n      </Box>\n      <Box flexGrow=[#xs(#num(3.0))] pt=[xxs(4)]>\n        <h1>\n          {\"A place to share knowledge\"->React.string}\n        </h1>\n        <p>\n          {\"Where good ideas find you.\"->React.string}\n        </p>\n      </Box>\n      <Box\n        position=[#xs(#absolute)]\n        bottom=[#xs(-5.0->#rem)]\n        left=[#xs(-5.0->#rem)]\n      >\n          ....\n      </Box>\n    </Box>\n  </Grid>\n}\n\n```\n\n_Example from [ReScript Conduit](https://github.com/rescriptbr/rescript-conduit/blob/master/src/pages/Signin/Signin.res)_\n\n## Documentation\n\nCheck out the [official documentation](https://ancestor.netlify.app).\n\n## License\nMIT\n"
  },
  {
    "path": "netlify.toml",
    "content": "[build]\n  ignore = \"git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF website/\"\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"ancestor\",\n  \"private\": true,\n  \"version\": \"0.1.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"workspaces\": [\n    \"packages/*\",\n    \"website\"\n  ],\n  \"scripts\": {\n    \"core\": \"yarn workspace @ancestor-ui/core\",\n    \"core:compile\": \"yarn core build\",\n    \"core:test\": \"yarn core test\",\n    \"website\": \"yarn workspace website\",\n    \"docs:docusaurus\": \"yarn website docusaurus\",\n    \"docs:compile\": \"yarn website build -w\",\n    \"docs:start\": \"yarn website docusaurus start\",\n    \"docs:build\": \"yarn website build\",\n    \"docs:clear\": \"yarn website docusaurus clear\"\n  },\n  \"devDependencies\": {},\n  \"peerDependencies\": {},\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/bindings/bsconfig.json",
    "content": "{\n  \"name\": \"@ancestor-ui/bindings\",\n  \"namespace\": false,\n  \"version\": \"0.0.1\",\n  \"sources\": [\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"commonjs\",\n      \"in-source\": true\n    }\n  ],\n  \"reason\": {\n    \"react-jsx\": 3\n  },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\"@rescript/react\"],\n  \"bs-dev-dependencies\": [],\n  \"ppx-flags\": []\n}\n"
  },
  {
    "path": "packages/bindings/package.json",
    "content": "{\n  \"name\": \"@ancestor-ui/bindings\",\n  \"version\": \"0.1.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"@emotion/css\": \"11.10.0\",\n    \"@rescript/react\": \"0.11.0-rc.3\",\n    \"react\": \"18.2.0\",\n    \"react-dom\": \"18.2.0\",\n    \"rescript\": \"10.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/bindings/src/Emotion.res",
    "content": "@module(\"@emotion/css\") external keyframes: {..} => string = \"keyframes\"\n@module(\"@emotion/css\") external cx: array<string> => string = \"cx\"\n@module(\"@emotion/css\") external compose: (string, string) => string = \"css\"\n@module(\"@emotion/css\") external injectGlobal: {..} => unit = \"injectGlobal\"\n@module(\"@emotion/css\") external injectGlobalRaw: string => unit = \"injectGlobal\"\n@module(\"@emotion/css\") external css: {..} => string = \"css\"\n@module(\"@emotion/css\") external rawCss: string => string = \"css\"\n"
  },
  {
    "path": "packages/bindings/src/ReactTestRenderer.res",
    "content": "type rendered\n\n@send external toJSON: rendered => Js.Json.t = \"toJSON\"\n@module(\"react-test-renderer\") external create: React.element => rendered = \"create\"\n"
  },
  {
    "path": "packages/bindings/src/Storybook.res",
    "content": "let story = (~title, ~component=?, ~argTypes=?, ~excludeStories=[], ()) => {\n  let ignoredStories = switch excludeStories {\n  | [] => \"default\"\n  | stories => \"default|\"->Js.String2.concat(stories->Js.Array2.joinWith(\"|\"))\n  }\n\n  {\n    \"title\": title,\n    \"excludeStories\": Js.Re.fromString(ignoredStories),\n    \"component\": component,\n    \"argTypes\": argTypes,\n  }\n}\n\n@module(\"./storybook.js\") external addArgTypes: ('props => React.element, {..}) => unit = \"default\"\n"
  },
  {
    "path": "packages/bindings/src/storybook.js",
    "content": "export default (fn, args) => (fn.argTypes = args);\n"
  },
  {
    "path": "packages/cli/ancestor.config.js",
    "content": "module.exports = {\n  fileName: \"AncestorCustom\",\n  breakpoints: {\n    xs: 0,\n    sm: 400,\n    md: 720,\n  },\n};\n"
  },
  {
    "path": "packages/cli/bsconfig.json",
    "content": "{\n  \"name\": \"@ancestor-ui/cli\",\n  \"sources\": [\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"commonjs\",\n      \"in-source\": true\n    }\n  ],\n  \"reason\": {\n    \"react-jsx\": 3\n  },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\"rescript-nodejs\", \"@rescript/react\", \"rescript-ink\"],\n  \"bs-dev-dependencies\": [],\n  \"ppx-flags\": []\n}\n"
  },
  {
    "path": "packages/cli/lib/bs/.bsbuild",
    "content": "2\nMain\nConfigParser\nsrc\t\n1\u0001\u0001\n0\n"
  },
  {
    "path": "packages/cli/lib/bs/.bsdeps",
    "content": "10.1.2\n/Users/marcos/Projects/ancestor/packages/cli\n0\nbsconfig.json\t0x1.8f93df04p+30\nsrc\t0x1.8f93ef8cp+30\n===\n/Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript/darwinarm64/rescript.exe\t0x1.8f93be64p+30\n"
  },
  {
    "path": "packages/cli/lib/bs/.ninja_log",
    "content": "# ninja log v6\n27\t45\t1675951075170856649\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n27\t45\t1675951075170856649\tsrc/ConfigParser.cmj\t737f6854d89ba736\n20\t27\t1675970348862273652\tsrc/ConfigParser.d\taf717c3ce1502d2c\n27\t45\t1675951075170856649\tsrc/ConfigParser.cmi\t737f6854d89ba736\n0\t12\t1675951357505975876\tsrc/Main.ast\tf997a5986aa1d877\n45\t59\t1675970348884749639\t../../src/Main.bs.js\t99675fd5a8e452a6\n45\t59\t1675970348884749639\tsrc/Main.cmj\t99675fd5a8e452a6\n45\t59\t1675970348884749639\tsrc/Main.cmi\t99675fd5a8e452a6\n0\t20\t1675970348862273652\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n12\t18\t1675951357505975876\tsrc/Main.d\t4373da1273a138\n0\t11\t1675970352651145388\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n12\t16\t1675970352651145388\tsrc/ConfigParser.d\taf717c3ce1502d2c\n16\t28\t1675951075170856649\tsrc/ConfigParser.cmj\t737f6854d89ba736\n16\t28\t1675951075170856649\tsrc/ConfigParser.cmi\t737f6854d89ba736\n16\t28\t1675951075170856649\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n28\t38\t1675970352666342028\tsrc/Main.cmj\t99675fd5a8e452a6\n28\t38\t1675970352666342028\tsrc/Main.cmi\t99675fd5a8e452a6\n28\t38\t1675970352666342028\t../../src/Main.bs.js\t99675fd5a8e452a6\n0\t12\t1675970355760331644\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n12\t17\t1675970355760331644\tsrc/ConfigParser.d\taf717c3ce1502d2c\n17\t29\t1675951075170856649\tsrc/ConfigParser.cmj\t737f6854d89ba736\n17\t29\t1675951075170856649\tsrc/ConfigParser.cmi\t737f6854d89ba736\n17\t29\t1675951075170856649\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n29\t40\t1675970355776584394\tsrc/Main.cmj\t99675fd5a8e452a6\n29\t40\t1675970355776584394\tsrc/Main.cmi\t99675fd5a8e452a6\n29\t40\t1675970355776584394\t../../src/Main.bs.js\t99675fd5a8e452a6\n1\t21\t1675970404045653271\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n21\t28\t1675970404045653271\tsrc/ConfigParser.d\taf717c3ce1502d2c\n28\t44\t1675970404070522845\tsrc/ConfigParser.cmj\t737f6854d89ba736\n28\t44\t1675970404070522845\tsrc/ConfigParser.cmi\t737f6854d89ba736\n28\t44\t1675970404070522845\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n45\t58\t1675970404070287765\tsrc/Main.cmj\t99675fd5a8e452a6\n45\t58\t1675970404070287765\tsrc/Main.cmi\t99675fd5a8e452a6\n45\t58\t1675970404070287765\t../../src/Main.bs.js\t99675fd5a8e452a6\n0\t11\t1675970412180853146\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n11\t16\t1675970412180853146\tsrc/ConfigParser.d\taf717c3ce1502d2c\n16\t28\t1675970412180853146\tsrc/ConfigParser.cmj\t737f6854d89ba736\n16\t28\t1675970412180853146\tsrc/ConfigParser.cmi\t737f6854d89ba736\n16\t28\t1675970412180853146\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n28\t38\t1675970412196298782\tsrc/Main.cmj\t99675fd5a8e452a6\n28\t38\t1675970412196298782\tsrc/Main.cmi\t99675fd5a8e452a6\n28\t38\t1675970412196298782\t../../src/Main.bs.js\t99675fd5a8e452a6\n1\t11\t1675970451401505656\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n11\t16\t1675970451401505656\tsrc/ConfigParser.d\taf717c3ce1502d2c\n0\t20\t1675970484485915455\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n20\t27\t1675970484485915455\tsrc/ConfigParser.d\taf717c3ce1502d2c\n27\t42\t1675951075170856649\tsrc/ConfigParser.cmj\t737f6854d89ba736\n27\t42\t1675951075170856649\tsrc/ConfigParser.cmi\t737f6854d89ba736\n27\t42\t1675951075170856649\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n42\t54\t1675970484507216793\tsrc/Main.cmj\t99675fd5a8e452a6\n42\t54\t1675970484507216793\tsrc/Main.cmi\t99675fd5a8e452a6\n42\t54\t1675970484507216793\t../../src/Main.bs.js\t99675fd5a8e452a6\n0\t13\t1675970492542645873\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n13\t19\t1675970492542645873\tsrc/ConfigParser.d\taf717c3ce1502d2c\n19\t31\t1675970492542645873\tsrc/ConfigParser.cmj\t737f6854d89ba736\n19\t31\t1675970492542645873\tsrc/ConfigParser.cmi\t737f6854d89ba736\n19\t31\t1675970492542645873\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n31\t42\t1675970492559499488\tsrc/Main.cmj\t99675fd5a8e452a6\n31\t42\t1675970492559499488\tsrc/Main.cmi\t99675fd5a8e452a6\n31\t42\t1675970492559499488\t../../src/Main.bs.js\t99675fd5a8e452a6\n0\t43\t1675970538879712033\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n43\t50\t1675970538879712033\tsrc/ConfigParser.d\taf717c3ce1502d2c\n50\t63\t1675970538879712033\tsrc/ConfigParser.cmj\t737f6854d89ba736\n50\t63\t1675970538879712033\tsrc/ConfigParser.cmi\t737f6854d89ba736\n50\t63\t1675970538879712033\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n0\t36\t1676028648639373678\tsrc/ConfigParser.ast\tbae8a1de5784cbf6\n36\t47\t1676028648639373678\tsrc/ConfigParser.d\taf717c3ce1502d2c\n47\t60\t1676028648639373678\tsrc/ConfigParser.cmj\t737f6854d89ba736\n47\t60\t1676028648639373678\tsrc/ConfigParser.cmi\t737f6854d89ba736\n47\t60\t1676028648639373678\t../../src/ConfigParser.bs.js\t737f6854d89ba736\n"
  },
  {
    "path": "packages/cli/lib/bs/.sourcedirs.json",
    "content": "{ \"dirs\" : [ \"src\" ] , \"pkgs\" : [ [ \"rescript-ink\" , \"/Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript-ink\" ] , [ \"rescript-nodejs\" , \"/Users/marcos/Projects/ancestor/node_modules/rescript-nodejs\" ] , [ \"@rescript/react\" , \"/Users/marcos/Projects/ancestor/node_modules/@rescript/react\" ] ] , \"generated\" : [] }"
  },
  {
    "path": "packages/cli/lib/bs/build.ninja",
    "content": "rescript = 1\ng_finger := /Users/marcos/Projects/ancestor/node_modules/rescript-nodejs/lib/ocaml/install.stamp\ng_finger := /Users/marcos/Projects/ancestor/node_modules/@rescript/react/lib/ocaml/install.stamp\ng_finger := /Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript-ink/lib/ocaml/install.stamp\nrule astj\n  command = /Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript/darwinarm64/bsc.exe  -bs-v 10.1.2 -bs-jsx 3  -absname -bs-ast -o $out $i\no src/Main.ast : astj ../../src/Main.res\nrule deps\n  command = /Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript/darwinarm64/bsb_helper.exe -hash b4d1b30a18559a085b0eb9325c0a99d3 $in\n  restat = 1\no src/Main.d : deps src/Main.ast\nrule mij\n  command = /Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript/darwinarm64/bsc.exe -I src -I /Users/marcos/Projects/ancestor/node_modules/rescript-nodejs/lib/ocaml -I /Users/marcos/Projects/ancestor/node_modules/@rescript/react/lib/ocaml -I /Users/marcos/Projects/ancestor/packages/cli/node_modules/rescript-ink/lib/ocaml   -bs-package-name @ancestor-ui/cli -bs-package-output commonjs:$in_d:.bs.js -bs-v $g_finger $i\n  dyndep = 1\n  restat = 1\no src/Main.cmj src/Main.cmi ../../src/Main.bs.js : mij src/Main.ast\no src/ConfigParser.ast : astj ../../src/ConfigParser.res\no src/ConfigParser.d : deps src/ConfigParser.ast\no src/ConfigParser.cmj src/ConfigParser.cmi ../../src/ConfigParser.bs.js : mij src/ConfigParser.ast\n"
  },
  {
    "path": "packages/cli/lib/bs/install.ninja",
    "content": "rescript = 1\nrule cp\n  command = cp $i $out\nrule touch\n command = touch $out\no Main.cmi : cp ../bs/src/Main.cmi\no Main.cmj : cp ../bs/src/Main.cmj\no Main.cmt : cp ../bs/src/Main.cmt\no Main.res : cp ../../src/Main.res\no ConfigParser.cmi : cp ../bs/src/ConfigParser.cmi\no ConfigParser.cmj : cp ../bs/src/ConfigParser.cmj\no ConfigParser.cmt : cp ../bs/src/ConfigParser.cmt\no ConfigParser.res : cp ../../src/ConfigParser.res\nbuild install.stamp : touch Main.cmi Main.cmj ConfigParser.cmi ConfigParser.cmj \n"
  },
  {
    "path": "packages/cli/lib/bs/src/ConfigParser.d",
    "content": ""
  },
  {
    "path": "packages/cli/lib/bs/src/Main.d",
    "content": "src/Main.cmj : src/ConfigParser.cmj src/ConfigParser.cmi\n"
  },
  {
    "path": "packages/cli/package.json",
    "content": "{\n  \"name\": \"@ancestor-ui/cli\",\n  \"version\": \"1.0.0\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@rescript/react\": \"0.10.3\",\n    \"rescript\": \"10.1.2\",\n    \"rescript-ink\": \"1.3.0\",\n    \"rescript-nodejs\": \"14.3.1\"\n  }\n}\n"
  },
  {
    "path": "packages/cli/src/ConfigParser.res",
    "content": "module Classifier = {\n  type any\n  type tagged<'keyValue> = Object(array<(string, 'keyValue)>) | Unknown\n\n  let objectFromAny = value => {\n    let value: Js.Dict.t<'value> = Obj.magic(value)\n    Object(value->Js.Dict.entries)\n  }\n\n  let classify = any => {\n    let typeof = Js.typeof(any->Obj.magic)\n    switch typeof {\n    | \"object\" => objectFromAny(any)\n    | _ => Unknown\n    }\n  }\n}\n\ntype configValue\ntype configRaw = {breakpoints?: configValue}\n\nmodule Breakpoints = {\n  type breakpointItem = {key: string, value: int}\n  type t = array<breakpointItem>\n  let itemsFromEntries = entries => entries->Js.Array2.map(((key, value)) => {key, value})\n  let fromRaw = value =>\n    value\n    ->Belt.Option.map(Classifier.classify)\n    ->Belt.Option.flatMap(v =>\n      switch v {\n      | Object(entries) => Some(itemsFromEntries(entries))\n      | _ => None\n      }\n    )\n}\n\ntype config = {breakpoints?: Breakpoints.t}\n\nlet parseConfig = (configRaw: configRaw): config => {\n  breakpoints: ?configRaw.breakpoints->Breakpoints.fromRaw,\n}\n\nlet configFilePath = Node.Path.join([Node.Process.cwd(), `ancestor.config.js`])\n\n@val external _require: string => configRaw = \"require\"\n\nlet getConfig = () => {\n  _require(configFilePath)->parseConfig->Js.log\n}\n"
  },
  {
    "path": "packages/cli/src/Main.res",
    "content": "open Ink\n\nmodule App = {\n  @react.component\n  let make = () => {\n    React.useEffect0(() => {\n      ConfigParser.getConfig()\n\n      None\n    })\n\n    <Text color=#green> {\"Testing...\"->React.string} </Text>\n  }\n}\n\nlet {waitUntilExit} = render(<App />, ~exitOnCtrlC=true, ())\nwaitUntilExit()->ignore\n"
  },
  {
    "path": "packages/core/.npmignore",
    "content": "*_Stories.res\n*_Test.res\n__tests__/\nscripts/\nsrc/_helpers_/\n**/__snapshots__/\n.storybook\n"
  },
  {
    "path": "packages/core/.storybook/main.js",
    "content": "module.exports = {\n  \"stories\": [\n    \"../src/**/*_Stories.bs.js\"\n  ],\n  \"addons\": [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\"\n  ],\n  \"framework\": \"@storybook/react\"\n}\n"
  },
  {
    "path": "packages/core/.storybook/preview-head.html",
    "content": "<style>\n  * {\n    box-sizing: border-box;\n    font-family: 'DM Sans', sans-serif;\n  }\n  \n  h1, h2, h3, h4, h5, h6, p {\n    margin: 0;\n  }\n  html {\n    font-size: 10px;\n  }\n</style>\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n"
  },
  {
    "path": "packages/core/.storybook/preview.js",
    "content": "export const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n}"
  },
  {
    "path": "packages/core/__tests__/Ancestor_Box_Test.res",
    "content": "open Jest\nopen Expect\nopen Ancestor\nmodule Renderer = ReactTestRenderer\n\ndescribe(\"Box\", () => {\n  test(\"should render with columns correctly\", () => {\n    expect(\n      Renderer.create(\n        <Box columns={xs: #6, md: #12, lg: #3}>\n          <div />\n        </Box>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n\n  test(\"should render without columns correctly\", () => {\n    expect(\n      Renderer.create(\n        <Box>\n          <div />\n        </Box>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n})\n"
  },
  {
    "path": "packages/core/__tests__/Ancestor_Grid_Test.res",
    "content": "open Jest\nopen Expect\nopen Ancestor\n\nmodule Renderer = ReactTestRenderer\n\ndescribe(\"Grid\", () => {\n  test(\"should with spacing render correctly\", () => {\n    expect(\n      Renderer.create(\n        <Grid spacing={xs: 1, md: 0, lg: 3}>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 1\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 2\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 3\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 4\"->React.string} </Box>\n        </Grid>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n\n  test(\"should without spacing render correctly\", () => {\n    expect(\n      Renderer.create(\n        <Grid>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 1\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 2\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 3\"->React.string} </Box>\n          <Box columns={xs: #6, md: #4, lg: #3}> {\"Column 4\"->React.string} </Box>\n        </Grid>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n})\n"
  },
  {
    "path": "packages/core/__tests__/Ancestor_Hidden_Test.res",
    "content": "open Jest\nopen Expect\nopen Ancestor\n\nmodule Renderer = ReactTestRenderer\n\ndescribe(\"Hidden\", () => {\n  test(\"should visually hide elements correctly\", () => {\n    expect(\n      Renderer.create(\n        <Hidden on={xs: true, md: false, lg: true}>\n          <div />\n        </Hidden>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n})\n"
  },
  {
    "path": "packages/core/__tests__/Ancestor_ResponsiveValueHook_Test.res",
    "content": "open Jest\nopen Expect\nopen Ancestor_TestingLibrary\n\n/**\n * Helper function to resize the window.\n */\n%%raw(`\n window.resizeTo = function resizeTo(width) {\n    Object.assign(this, {\n      innerWidth: width,\n      outerWidth: width,\n    }).dispatchEvent(new this.Event('resize'))\n  }\n`)\n\n@val external window: Dom.window = \"window\"\n@send external resizeTo: (Dom.window, int) => unit = \"resizeTo\"\n\ndescribe(\"ResponsiveValueHook\", () => {\n  describe(\".useResponsiveValue(...)\", () => {\n    test(\n      \"should returns the responsive value correctly\",\n      () => {\n        let {result} = renderHook(\n          () => Ancestor.useResponsiveValue(\"Default\", {xs: \"Mobile\", md: \"Tablet\"}),\n        )\n\n        expect(result.current)->toBe(\"Tablet\")\n\n        act((. ()) => window->resizeTo(320))\n\n        expect(result.current)->toBe(\"Mobile\")\n      },\n    )\n  })\n})\n"
  },
  {
    "path": "packages/core/__tests__/Ancestor_Stack_Test.res",
    "content": "open Jest\nopen Expect\nopen Ancestor\nmodule Renderer = ReactTestRenderer\n\ndescribe(\"Stack\", () => {\n  test(\"should render correctly\", () => {\n    expect(\n      Renderer.create(\n        <Stack direction={xs: #horizontal, md: #vertical}>\n          <div />\n        </Stack>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n\n  test(\"should render with dividers correctly\", () => {\n    let placeholder = <div> {`Placeholder`->React.string} </div>\n    let divider = <div> {`Divider`->React.string} </div>\n\n    expect(\n      Renderer.create(\n        <Stack divider={divider}>\n          placeholder\n          placeholder\n        </Stack>,\n      )->Renderer.toJSON,\n    )->toMatchSnapshot\n  })\n})\n"
  },
  {
    "path": "packages/core/__tests__/__snapshots__/Ancestor_Box_Test.bs.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Box should render with columns correctly 1`] = `\n@media (min-width:0px) {\n  .emotion-0 {\n    -webkit-flex-basis: 50%;\n    -ms-flex-preferred-size: 50%;\n    flex-basis: 50%;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-0 {\n    -webkit-flex-basis: 100%;\n    -ms-flex-preferred-size: 100%;\n    flex-basis: 100%;\n  }\n}\n\n@media (min-width:1280px) {\n  .emotion-0 {\n    -webkit-flex-basis: 25%;\n    -ms-flex-preferred-size: 25%;\n    flex-basis: 25%;\n  }\n}\n\n<div\n  className=\"emotion-0  emotion-1\"\n>\n  <div />\n</div>\n`;\n\nexports[`Box should render without columns correctly 1`] = `\n<div\n  className=\"emotion-0  emotion-0\"\n>\n  <div />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/__tests__/__snapshots__/Ancestor_Grid_Test.bs.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Grid should with spacing render correctly 1`] = `\n@media (min-width:0px) {\n  .emotion-0 {\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    width: calc(100% + 8px);\n    margin-left: -8px;\n    margin-top: -8px;\n  }\n\n  .emotion-0>* {\n    box-sizing: border-box;\n    padding-top: 8px;\n    padding-left: 8px;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-0 {\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    width: calc(100% + 0px);\n    margin-left: -0px;\n    margin-top: -0px;\n  }\n\n  .emotion-0>* {\n    box-sizing: border-box;\n    padding-top: 0px;\n    padding-left: 0px;\n  }\n}\n\n@media (min-width:1280px) {\n  .emotion-0 {\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    -ms-flex-wrap: wrap;\n    flex-wrap: wrap;\n    width: calc(100% + 24px);\n    margin-left: -24px;\n    margin-top: -24px;\n  }\n\n  .emotion-0>* {\n    box-sizing: border-box;\n    padding-top: 24px;\n    padding-left: 24px;\n  }\n}\n\n@media (min-width:0px) {\n  .emotion-2 {\n    -webkit-flex-basis: 50%;\n    -ms-flex-preferred-size: 50%;\n    flex-basis: 50%;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-2 {\n    -webkit-flex-basis: 33.333333333333336%;\n    -ms-flex-preferred-size: 33.333333333333336%;\n    flex-basis: 33.333333333333336%;\n  }\n}\n\n@media (min-width:1280px) {\n  .emotion-2 {\n    -webkit-flex-basis: 25%;\n    -ms-flex-preferred-size: 25%;\n    flex-basis: 25%;\n  }\n}\n\n<div\n  className=\"emotion-0  emotion-1\"\n>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 1\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 2\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 3\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 4\n  </div>\n</div>\n`;\n\nexports[`Grid should without spacing render correctly 1`] = `\n.emotion-0 {\n  width: 100%;\n  -webkit-box-flex-wrap: wrap;\n  -webkit-flex-wrap: wrap;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (min-width:0px) {\n  .emotion-2 {\n    -webkit-flex-basis: 50%;\n    -ms-flex-preferred-size: 50%;\n    flex-basis: 50%;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-2 {\n    -webkit-flex-basis: 33.333333333333336%;\n    -ms-flex-preferred-size: 33.333333333333336%;\n    flex-basis: 33.333333333333336%;\n  }\n}\n\n@media (min-width:1280px) {\n  .emotion-2 {\n    -webkit-flex-basis: 25%;\n    -ms-flex-preferred-size: 25%;\n    flex-basis: 25%;\n  }\n}\n\n<div\n  className=\"emotion-0  emotion-1\"\n>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 1\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 2\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 3\n  </div>\n  <div\n    className=\"emotion-2  emotion-1\"\n  >\n    Column 4\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/__tests__/__snapshots__/Ancestor_Hidden_Test.bs.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Hidden should visually hide elements correctly 1`] = `\n@media (min-width:0px) {\n  .emotion-0 {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-style: none;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-0 {\n    position: static;\n    width: auto;\n    height: auto;\n    padding: 0;\n    overflow: visible;\n    white-space: normal;\n    border-style: initial;\n    clip: initial;\n  }\n}\n\n@media (min-width:1280px) {\n  .emotion-0 {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-style: none;\n  }\n}\n\n<div\n  className=\"emotion-0  emotion-1\"\n>\n  <div />\n</div>\n`;\n"
  },
  {
    "path": "packages/core/__tests__/__snapshots__/Ancestor_Stack_Test.bs.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Stack should render correctly 1`] = `\n.emotion-0 {\n  display: -webkit-box;\n  display: -webkit-flex;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (min-width:0px) {\n  .emotion-0 {\n    -webkit-flex-direction: row;\n    -ms-flex-direction: row;\n    flex-direction: row;\n  }\n}\n\n@media (min-width:920px) {\n  .emotion-0 {\n    -webkit-flex-direction: column;\n    -ms-flex-direction: column;\n    flex-direction: column;\n  }\n}\n\n<div\n  className=\"emotion-0  emotion-1\"\n>\n  <div />\n</div>\n`;\n\nexports[`Stack should render with dividers correctly 1`] = `\n.emotion-0 {\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=\"emotion-0  emotion-1\"\n>\n  <div>\n    Placeholder\n  </div>\n  <div>\n    Divider\n  </div>\n  <div>\n    Placeholder\n  </div>\n</div>\n`;\n"
  },
  {
    "path": "packages/core/bsconfig.json",
    "content": "{\n  \"name\": \"@ancestor-ui/core\",\n  \"version\": \"0.0.8-beta\",\n  \"sources\": [\n    {\n      \"dir\": \"scripts\",\n      \"type\": \"dev\",\n      \"subdirs\": true\n    },\n    {\n      \"dir\": \"__tests__\",\n      \"type\": \"dev\",\n      \"subdirs\": true\n    },\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"commonjs\",\n      \"in-source\": true\n    }\n  ],\n  \"jsx\": { \"version\": 4, \"mode\": \"classic\" },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\n    \"@rescript/react\",\n    \"@ancestor-ui/bindings\",\n    \"@ancestor-ui/css\",\n    \"bs-css\",\n    \"bs-css-emotion\"\n  ],\n  \"bs-dev-dependencies\": [\"rescript-nodejs\", \"@greenlabs/rescript-jest\"],\n  \"ppx-flags\": []\n}\n"
  },
  {
    "path": "packages/core/jest.config.js",
    "content": "module.exports = {\n  testMatch: [\"**/*_Test.bs.js\"],\n  snapshotSerializers: [\"@emotion/jest/serializer\"],\n  testEnvironment: \"jsdom\",\n};\n"
  },
  {
    "path": "packages/core/package.json",
    "content": "{\n  \"name\": \"@ancestor-ui/core\",\n  \"version\": \"0.7.1\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"rescript\",\n    \"rescript-react\",\n    \"rescript ui library\",\n    \"rescript ui primitives\",\n    \"rescript unstyled components\",\n    \"ui library\",\n    \"layout primitives\"\n  ],\n  \"devDependencies\": {\n    \"@babel/core\": \"7.17.5\",\n    \"@emotion/css\": \"11.10.0\",\n    \"@emotion/jest\": \"11.9.3\",\n    \"@greenlabs/rescript-jest\": \"1.0.1\",\n    \"@rescript/react\": \"0.11.0-rc.3\",\n    \"@storybook/addon-actions\": \"6.5.15\",\n    \"@storybook/addon-essentials\": \"6.5.15\",\n    \"@storybook/addon-interactions\": \"6.5.15\",\n    \"@storybook/addon-links\": \"6.5.15\",\n    \"@storybook/react\": \"6.5.15\",\n    \"@storybook/testing-library\": \"0.0.13\",\n    \"@testing-library/react-hooks\": \"8.0.1\",\n    \"babel-loader\": \"8.2.3\",\n    \"jest\": \"29.3.1\",\n    \"jsdom\": \"20.0.0\",\n    \"react\": \"18.2.0\",\n    \"react-dom\": \"18.2.0\",\n    \"react-test-renderer\": \"18.2.0\",\n    \"rescript\": \"10.1.0\",\n    \"rescript-nodejs\": \"14.3.1\"\n  },\n  \"dependencies\": {\n    \"@ancestor-ui/bindings\": \"0.1.0\",\n    \"@ancestor-ui/css\": \"0.6.1\"\n  },\n  \"peerDependencies\": {\n    \"@rescript/react\": \">=0.11\",\n    \"react\": \">=18\",\n    \"react-dom\": \">=18\",\n    \"rescript\": \">=10\"\n  },\n  \"scripts\": {\n    \"build\": \"rescript build -with-deps\",\n    \"watch\": \"rescript build -w\",\n    \"clean\": \"rescript clean\",\n    \"format\": \"rescript format\",\n    \"test\": \"jest\",\n    \"generate-interface\": \"bsc -i\",\n    \"storybook\": \"start-storybook -p 6006\",\n    \"build-storybook\": \"build-storybook\",\n    \"add-prop\": \"node scripts/AddProps.bs.js\"\n  }\n}\n"
  },
  {
    "path": "packages/core/scripts/AddProps.res",
    "content": "open Node\n\nmodule Modules = {\n  type t = Base | Hidden | Stack | Grid | Box\n\n  let componentsPath = Path.join([NodeJs.Global.dirname, \"..\", \"src\", \"components\"])\n\n  let getPath = m => {\n    let modulePath = switch m {\n    | Base => [\"base\", \"Ancestor_Base.res\"]\n    | Hidden => [\"hidden\", \"Ancestor_Hidden.res\"]\n    | Box => [\"box\", \"Ancestor_Box.res\"]\n    | Grid => [\"grid\", \"Ancestor_Grid.res\"]\n    | Stack => [\"stack\", \"Ancestor_Stack.res\"]\n    }\n\n    Path.join([componentsPath]->Js.Array2.concat(modulePath))\n  }\n\n  let get = m => Fs.readFileSync(getPath(m), #utf8)->Js.String2.split(\"\\n\")\n\n  let write = (content, m) => {\n    let path = getPath(m)\n\n    Fs.writeFileSync(path, content, #utf8)\n    Child_process.execSync(`yarn rescript format ${path}`, Child_process.option())->ignore\n  }\n}\n\nmodule PropsCollector = {\n  type prefix = Start | End\n\n  module type Prefix = {\n    type t = prefix\n    let fromString: string => option<t>\n  }\n\n  module type PrefixInterface = {\n    let startPrefix: Js.Re.t\n    let endPrefix: Js.Re.t\n  }\n\n  module MakePrefix = (M: PrefixInterface): Prefix => {\n    type t = prefix\n\n    let fromString = line => {\n      if M.startPrefix->Js.Re.test_(line) {\n        Some(Start)\n      } else if M.endPrefix->Js.Re.test_(line) {\n        Some(End)\n      } else {\n        None\n      }\n    }\n  }\n\n  module DeclarationPrefix = MakePrefix({\n    let startPrefix = \"declaration:start\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n    let endPrefix = \"declaration:end\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n  })\n\n  module ForwardFnPrefix = MakePrefix({\n    let startPrefix = \"forward-fn:start\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n    let endPrefix = \"forward-fn:end\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n  })\n\n  module ForwardPrefix = MakePrefix({\n    let startPrefix = \"forward:start\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n    let endPrefix = \"forward:end\"->Js.Re.fromStringWithFlags(~flags=\"ig\")\n  })\n\n  type lineCollector = {\n    collect: bool,\n    lines: array<string>,\n  }\n\n  type collector<'prefix> = {\n    prefix: option<'prefix>,\n    head: array<string>,\n    tail: array<string>,\n  }\n\n  type api = {\n    props: array<string>,\n    head: array<string>,\n    tail: array<string>,\n  }\n\n  let getPropsList = (lines, prefix: module(Prefix)) => {\n    let module(Prefix) = prefix\n\n    let collector = lines->Js.Array2.reduce((collector, line) => {\n      let prefix = Prefix.fromString(line)\n\n      switch (collector, prefix) {\n      | ({collect: true, lines}, None) => {\n          collect: true,\n          lines: lines->Js.Array2.concat([line]),\n        }\n      | ({collect: true, lines}, Some(End)) => {collect: false, lines}\n      | ({collect: false}, Some(Start)) => {collect: true, lines: []}\n      | (_, _) => collector\n      }\n    }, {collect: false, lines: []})\n    collector.lines\n  }\n\n  let extractLines = (lines, prefix: module(Prefix)) => {\n    let module(Prefix) = prefix\n\n    lines->Js.Array2.reduce((collector, line) => {\n      let prefix = Prefix.fromString(line)\n\n      switch (collector, prefix) {\n      | ({head, prefix: None}, None) => {\n          ...collector,\n          head: head->Js.Array2.concat([line]),\n        }\n      | ({head, prefix: None}, Some(Start)) => {\n          ...collector,\n          prefix: Some(Start),\n          head: head->Js.Array2.concat([line]),\n        }\n      | ({prefix: Some(Start), tail}, Some(End)) => {\n          ...collector,\n          tail: tail->Js.Array2.concat([line]),\n          prefix: Some(End),\n        }\n      | ({prefix: Some(End), tail}, None) => {\n          ...collector,\n          tail: tail->Js.Array2.concat([line]),\n        }\n      | _ => collector\n      }\n    }, {tail: [], head: [], prefix: None})\n  }\n\n  let extract = (fileContent, ~prefix: module(Prefix)) => {\n    let module(Prefix) = prefix\n    let propsList = fileContent->getPropsList(module(Prefix))\n    let fileLines = fileContent->extractLines(module(Prefix))\n    {\n      props: propsList,\n      head: fileLines.head,\n      tail: fileLines.tail,\n    }\n  }\n}\n\nmodule PropsUpdater = {\n  type t = Declaration | Forward | ForwardToFn\n\n  let updateList = (propsList, ~props, ~kind) => {\n    let updatedProps = props->Js.Array2.map(propName =>\n      switch kind {\n      | Declaration => `~${propName}=?,`\n      | Forward => `?${propName}`\n      | ForwardToFn => `?${propName},`\n      }\n    )\n\n    propsList->Js.Array2.concat(updatedProps)\n  }\n\n  let add = (fileContent, ~newProps, ~collectorPrefix: module(PropsCollector.Prefix), ~kind) => {\n    let moduleApi = PropsCollector.extract(fileContent, ~prefix=collectorPrefix)\n\n    let updatedDeclarationProps = moduleApi.props->updateList(~props=newProps, ~kind)\n\n    moduleApi.head->Js.Array2.concatMany([updatedDeclarationProps, moduleApi.tail])\n  }\n}\n\n/*\n * Get the props list from the command args\n */\nlet newProps = Process.argv->Belt.Array.sliceToEnd(2)\n\n/*\n * All modules that are using responsive props\n */\nlet modules: array<Modules.t> = [Base, Hidden, Stack, Grid, Box]\n\nlet updateModuleProps = (m: Modules.t) => {\n  let forwardKind = m === Base ? PropsUpdater.ForwardToFn : PropsUpdater.Forward\n  let prefixModule: module(PropsCollector.Prefix) =\n    m === Base ? module(PropsCollector.ForwardFnPrefix) : module(PropsCollector.ForwardPrefix)\n\n  Modules.get(m)\n  ->PropsUpdater.add(\n    ~collectorPrefix=module(PropsCollector.DeclarationPrefix),\n    ~newProps,\n    ~kind=Declaration,\n  )\n  ->PropsUpdater.add(~collectorPrefix=prefixModule, ~newProps, ~kind=forwardKind)\n  ->Js.Array2.joinWith(\"\\n\")\n  ->Modules.write(m)\n}\n\nmodules->Js.Array2.forEach(updateModuleProps)\n"
  },
  {
    "path": "packages/core/src/Ancestor.res",
    "content": "include Ancestor_Core\n\nmodule Defaults = {\n  module Breakpoints = {\n    type breakpoints<'a> = {\n      xs?: 'a,\n      sm?: 'a,\n      md?: 'a,\n      lg?: 'a,\n      xl?: 'a,\n    }\n    type keyOfBreakpoints = AncestorCss.Defaults.Breakpoints.breakpoints\n    let encode = breakpoints => [\n      (#xs, breakpoints.xs),\n      (#sm, breakpoints.sm),\n      (#md, breakpoints.md),\n      (#lg, breakpoints.lg),\n      (#xl, breakpoints.xl),\n    ]\n    let sizeByBreakpoints = AncestorCss.Defaults.Breakpoints.sizeByBreakpoints\n  }\n  module Spacing = AncestorCss.Defaults.Spacing\n  module Radius = AncestorCss.Defaults.Radius\n  module ZIndex = AncestorCss.Defaults.ZIndex\n  module Colors = AncestorCss.Defaults.Colors\n  module FontSize = AncestorCss.Defaults.FontSize\n  module FontWeight = AncestorCss.Defaults.FontWeight\n  module FontFamily = AncestorCss.Defaults.FontFamily\n  module LineHeight = AncestorCss.Defaults.LineHeight\n  module LetterSpacing = AncestorCss.Defaults.LetterSpacing\n  module Typography = AncestorCss.Defaults.Typography\n  module Shadows = AncestorCss.Defaults.Shadows\n}\n\ninclude Make(\n  Defaults.Breakpoints,\n  Defaults.Colors,\n  Defaults.Spacing,\n  Defaults.Radius,\n  Defaults.ZIndex,\n  Defaults.Typography,\n  Defaults.Shadows,\n)\n\n/*\n * We need to expose the breakpoints record for the compiler.\n */\ninclude Defaults.Breakpoints\n"
  },
  {
    "path": "packages/core/src/_helpers_/Ancestor_Helpers.res",
    "content": "open Ancestor\n\nmodule Colors = {\n  let gray1 = #hex(\"616161\")\n  let gray2 = #hex(\"d4d4d4\")\n}\n\nmodule Placeholder = {\n  @react.component\n  let make = (~children=React.null, ~width={xs: 7.2->#rem}, ~height={xs: 7.2->#rem}) =>\n    <Box\n      width\n      height\n      fontSize={xs: 12->#px}\n      fontWeight={xs: #num(700)}\n      display={xs: #flex}\n      justifyContent={xs: #center}\n      alignItems={xs: #center}\n      borderRadius={xs: 1}\n      border={xs: (2->#px, #solid, Colors.gray1)}\n      bgColor={xs: Colors.gray2}>\n      children\n    </Box>\n}\n"
  },
  {
    "path": "packages/core/src/bindings/Ancestor_React.res",
    "content": "type tags = [\n  | #a\n  | #abbr\n  | #acronym\n  | #address\n  | #applet\n  | #area\n  | #article\n  | #aside\n  | #audio\n  | #b\n  | #base\n  | #basefont\n  | #bdo\n  | #big\n  | #blockquote\n  | #body\n  | #br\n  | #button\n  | #canvas\n  | #caption\n  | #center\n  | #cite\n  | #code\n  | #col\n  | #colgroup\n  | #datalist\n  | #dd\n  | #del\n  | #dfn\n  | #div\n  | #dl\n  | #dt\n  | #em\n  | #embed\n  | #fieldset\n  | #figcaption\n  | #figure\n  | #font\n  | #footer\n  | #form\n  | #frame\n  | #frameset\n  | #head\n  | #header\n  | #h1\n  | #h2\n  | #h3\n  | #h3\n  | #h4\n  | #h5\n  | #h6\n  | #hr\n  | #html\n  | #i\n  | #iframe\n  | #img\n  | #input\n  | #ins\n  | #kbd\n  | #label\n  | #legend\n  | #li\n  | #link\n  | #main\n  | #map\n  | #mark\n  | #meta\n  | #meter\n  | #nav\n  | #noscript\n  | #object\n  | #ol\n  | #optgroup\n  | #option\n  | #p\n  | #param\n  | #pre\n  | #progress\n  | #q\n  | #s\n  | #samp\n  | #script\n  | #section\n  | #select\n  | #small\n  | #source\n  | #span\n  | #strike\n  | #strong\n  | #style\n  | #sub\n  | #sup\n  | #table\n  | #tbody\n  | #td\n  | #textarea\n  | #tfoot\n  | #th\n  | #thead\n  | #time\n  | #title\n  | #tr\n  | #u\n  | #ul\n  | #var\n  | #video\n  | #wbr\n]\n\n@module(\"react\")\nexternal createElement: (tags, ReactDOM.domProps, option<React.element>) => React.element =\n  \"createElement\"\n\n"
  },
  {
    "path": "packages/core/src/bindings/Ancestor_TestingLibrary.res",
    "content": "type result<'a> = {current: 'a}\ntype renderHookResult<'a> = {result: result<'a>}\n\n@module(\"@testing-library/react-hooks/native\")\nexternal renderHook: (unit => 'a) => renderHookResult<'a> = \"renderHook\"\n@module(\"@testing-library/react-hooks/native\")\nexternal act: ((. unit) => unit) => unit = \"act\"\n"
  },
  {
    "path": "packages/core/src/components/base/Ancestor_Base.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n  @react.component\n  let make = (\n    // declaration:start\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~px=?,\n    ~py=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // declaration:end\n    // Base props\n    ~tag: Ancestor_React.tags=#div,\n    // React props\n    ~innerRef=?,\n    ~dangerouslySetInnerHTML=?,\n    // DOM Props\n    ~className=\"\",\n    ~children=?,\n    ~id=?,\n    ~onClick=?,\n    ~onSubmit=?,\n    ~onChange=?,\n    ~alt=?,\n    ~src=?,\n    ~ariaDetails=?,\n    ~ariaDisabled=?,\n    ~ariaHidden=?,\n    ~ariaKeyshortcuts=?,\n    ~ariaLabel=?,\n    ~ariaRoledescription=?,\n    ~ariaExpanded=?,\n    ~ariaLevel=?,\n    ~ariaModal=?,\n    ~ariaMultiline=?,\n    ~ariaMultiselectable=?,\n    ~ariaPlaceholder=?,\n    ~ariaReadonly=?,\n    ~ariaRequired=?,\n    ~ariaSelected=?,\n    ~ariaSort=?,\n    ~ariaValuemax=?,\n    ~ariaValuemin=?,\n    ~ariaValuenow=?,\n    ~ariaValuetext=?,\n    ~ariaAtomic=?,\n    ~ariaBusy=?,\n    ~ariaRelevant=?,\n    ~ariaGrabbed=?,\n    ~ariaActivedescendant=?,\n    ~ariaColcount=?,\n    ~ariaColindex=?,\n    ~ariaColspan=?,\n    ~ariaControls=?,\n    ~ariaDescribedby=?,\n    ~ariaErrormessage=?,\n    ~ariaFlowto=?,\n    ~ariaLabelledby=?,\n    ~ariaOwns=?,\n    ~ariaPosinset=?,\n    ~ariaRowcount=?,\n    ~ariaRowindex=?,\n    ~ariaRowspan=?,\n    ~ariaSetsize=?,\n    ~defaultChecked=?,\n    ~defaultValue=?,\n    ~accessKey=?,\n    ~contentEditable=?,\n    ~contextMenu=?,\n    ~lang=?,\n    ~role=?,\n    ~style=?,\n    ~spellCheck=?,\n    ~tabIndex=?,\n    ~title=?,\n    ~itemID=?,\n    ~itemProp=?,\n    ~itemRef=?,\n    ~itemScope=?,\n    ~itemType=?,\n    ~accept=?,\n    ~acceptCharset=?,\n    ~action=?,\n    ~allowFullScreen=?,\n    ~async=?,\n    ~autoComplete=?,\n    ~autoCapitalize=?,\n    ~autoFocus=?,\n    ~autoPlay=?,\n    ~challenge=?,\n    ~charSet=?,\n    ~checked=?,\n    ~cite=?,\n    ~crossOrigin=?,\n    ~cols=?,\n    ~colSpan=?,\n    ~content=?,\n    ~controls=?,\n    ~coords=?,\n    ~data=?,\n    ~dateTime=?,\n    ~default=?,\n    ~defer=?,\n    ~disabled=?,\n    ~download=?,\n    ~encType=?,\n    ~form=?,\n    ~formAction=?,\n    ~formTarget=?,\n    ~formMethod=?,\n    ~headers=?,\n    ~high=?,\n    ~href=?,\n    ~hrefLang=?,\n    ~htmlFor=?,\n    ~httpEquiv=?,\n    ~icon=?,\n    ~inputMode=?,\n    ~integrity=?,\n    ~keyType=?,\n    ~kind=?,\n    ~label=?,\n    ~list=?,\n    ~loop=?,\n    ~low=?,\n    ~manifest=?,\n    ~max=?,\n    ~maxLength=?,\n    ~media=?,\n    ~mediaGroup=?,\n    ~method=?,\n    ~min=?,\n    ~minLength=?,\n    ~multiple=?,\n    ~muted=?,\n    ~name=?,\n    ~nonce=?,\n    ~noValidate=?,\n    ~open_=?,\n    ~optimum=?,\n    ~pattern=?,\n    ~placeholder=?,\n    ~playsInline=?,\n    ~poster=?,\n    ~preload=?,\n    ~radioGroup=?,\n    ~readOnly=?,\n    ~rel=?,\n    ~required=?,\n    ~reversed=?,\n    ~rows=?,\n    ~rowSpan=?,\n    ~sandbox=?,\n    ~scope=?,\n    ~scoped=?,\n    ~scrolling=?,\n    ~selected=?,\n    ~shape=?,\n    ~size=?,\n    ~sizes=?,\n    ~span=?,\n    ~srcDoc=?,\n    ~srcLang=?,\n    ~srcSet=?,\n    ~start=?,\n    ~step=?,\n    ~summary=?,\n    ~target=?,\n    ~type_=?,\n    ~useMap=?,\n    ~value=?,\n    ~wrap=?,\n    ~onCopy=?,\n    ~onCut=?,\n    ~onPaste=?,\n    ~onCompositionEnd=?,\n    ~onCompositionStart=?,\n    ~onCompositionUpdate=?,\n    ~onKeyDown=?,\n    ~onKeyPress=?,\n    ~onKeyUp=?,\n    ~onFocus=?,\n    ~onBlur=?,\n    ~onInput=?,\n    ~onInvalid=?,\n    ~onContextMenu=?,\n    ~onDoubleClick=?,\n    ~onDrag=?,\n    ~onDragEnd=?,\n    ~onDragEnter=?,\n    ~onDragExit=?,\n    ~onDragLeave=?,\n    ~onDragOver=?,\n    ~onDragStart=?,\n    ~onDrop=?,\n    ~onMouseDown=?,\n    ~onMouseEnter=?,\n    ~onMouseLeave=?,\n    ~onMouseMove=?,\n    ~onMouseOut=?,\n    ~onMouseOver=?,\n    ~onMouseUp=?,\n    ~onSelect=?,\n    ~onTouchCancel=?,\n    ~onTouchEnd=?,\n    ~onTouchMove=?,\n    ~onTouchStart=?,\n    ~onPointerOver=?,\n    ~onPointerEnter=?,\n    ~onPointerDown=?,\n    ~onPointerMove=?,\n    ~onPointerUp=?,\n    ~onPointerCancel=?,\n    ~onPointerOut=?,\n    ~onPointerLeave=?,\n    ~onGotPointerCapture=?,\n    ~onLostPointerCapture=?,\n    ~onScroll=?,\n    ~onWheel=?,\n    ~onAbort=?,\n    ~onCanPlay=?,\n    ~onCanPlayThrough=?,\n    ~onDurationChange=?,\n    ~onEmptied=?,\n    ~onEnded=?,\n    ~onError=?,\n    ~onLoadedData=?,\n    ~onLoadedMetadata=?,\n    ~onLoadStart=?,\n    ~onPause=?,\n    ~onPlay=?,\n    ~onPlaying=?,\n    ~onProgress=?,\n    ~onRateChange=?,\n    ~onSeeked=?,\n    ~onSeeking=?,\n    ~onStalled=?,\n    ~onSuspend=?,\n    ~onTimeUpdate=?,\n    ~onVolumeChange=?,\n    ~onWaiting=?,\n    ~onLoad=?,\n    ~onAnimationStart=?,\n    ~onAnimationEnd=?,\n    ~onAnimationIteration=?,\n    ~onTransitionEnd=?,\n  ) => {\n    let componentClassName = {\n      let responsiveStyles = Styles.createResponsiveStyles(\n        // forward-fn:start\n        ~borderRadius?,\n        ~borderTLRadius?,\n        ~borderTRRadius?,\n        ~borderBLRadius?,\n        ~borderBRRadius?,\n        ~borderStyle?,\n        ~borderColor?,\n        ~borderWidth?,\n        ~borderRightStyle?,\n        ~borderLeftStyle?,\n        ~borderTopStyle?,\n        ~borderBottomStyle?,\n        ~borderRightColor?,\n        ~borderLeftColor?,\n        ~borderTopColor?,\n        ~borderBottomColor?,\n        ~borderRightWidth?,\n        ~borderLeftWidth?,\n        ~borderTopWidth?,\n        ~borderBottomWidth?,\n        ~border?,\n        ~borderRight?,\n        ~borderLeft?,\n        ~borderTop?,\n        ~borderBottom?,\n        ~bgColor?,\n        ~bgSize?,\n        ~bgPosition?,\n        ~bgImage?,\n        ~color?,\n        ~display?,\n        ~justifyContent?,\n        ~flexDirection?,\n        ~alignItems?,\n        ~flexBasis?,\n        ~flexWrap?,\n        ~flexGrow?,\n        ~alignContent?,\n        ~alignSelf?,\n        ~justifySelf?,\n        ~gap?,\n        ~p?,\n        ~py?,\n        ~px?,\n        ~pt?,\n        ~pb?,\n        ~pl?,\n        ~pr?,\n        ~m?,\n        ~mx?,\n        ~my?,\n        ~mt?,\n        ~mb?,\n        ~ml?,\n        ~mr?,\n        ~textAlign?,\n        ~fontFamily?,\n        ~fontWeight?,\n        ~fontSize?,\n        ~letterSpacing?,\n        ~lineHeight?,\n        ~width?,\n        ~height?,\n        ~minW?,\n        ~minH?,\n        ~maxW?,\n        ~maxH?,\n        ~position?,\n        ~top?,\n        ~bottom?,\n        ~left?,\n        ~right?,\n        ~zIndex?,\n        ~boxSizing?,\n        ~overflow?,\n        ~overflowX?,\n        ~overflowY?,\n        ~cursor?,\n        ~visibility?,\n        ~listStyleType?,\n        ~listStylePosition?,\n        ~listStyleImage?,\n        ~listStyle?,\n        ~outlineStyle?,\n        ~outline?,\n        ~textDecorationStyle?,\n        ~textDecorationLine?,\n        ~textDecoration?,\n        ~transform?,\n        ~_hover?,\n        ~_focus?,\n        ~_active?,\n        ~_focusWithin?,\n        ~_focusVisible?,\n        ~_disabled?,\n        ~_before?,\n        ~_after?,\n        ~_even?,\n        ~_odd?,\n        ~_first?,\n        ~_last?,\n        ~_notFirst?,\n        ~_notLast?,\n        ~transition?,\n        ~transitionProperty?,\n        ~transitionDelay?,\n        ~transitionDuration?,\n        ~transitionTimingFunction?,\n        ~transitions?,\n        // forward-fn:end\n        (),\n      )\n\n      `${className} ${responsiveStyles}`\n    }\n\n    Ancestor_React.createElement(\n      tag,\n      {\n        className: componentClassName,\n        ?id,\n        ?onClick,\n        ?onSubmit,\n        ?onChange,\n        ?src,\n        ?alt,\n        ?dangerouslySetInnerHTML,\n        ref: ?innerRef,\n        ?ariaDetails,\n        ?ariaDisabled,\n        ?ariaHidden,\n        ?ariaKeyshortcuts,\n        ?ariaLabel,\n        ?ariaRoledescription,\n        ?ariaExpanded,\n        ?ariaLevel,\n        ?ariaModal,\n        ?ariaMultiline,\n        ?ariaMultiselectable,\n        ?ariaPlaceholder,\n        ?ariaReadonly,\n        ?ariaRequired,\n        ?ariaSelected,\n        ?ariaSort,\n        ?ariaValuemax,\n        ?ariaValuemin,\n        ?ariaValuenow,\n        ?ariaValuetext,\n        ?ariaAtomic,\n        ?ariaBusy,\n        ?ariaRelevant,\n        ?ariaGrabbed,\n        ?ariaActivedescendant,\n        ?ariaColcount,\n        ?ariaColindex,\n        ?ariaColspan,\n        ?ariaControls,\n        ?ariaDescribedby,\n        ?ariaErrormessage,\n        ?ariaFlowto,\n        ?ariaLabelledby,\n        ?ariaOwns,\n        ?ariaPosinset,\n        ?ariaRowcount,\n        ?ariaRowindex,\n        ?ariaRowspan,\n        ?ariaSetsize,\n        ?defaultChecked,\n        ?defaultValue,\n        ?accessKey,\n        ?contentEditable,\n        ?contextMenu,\n        ?lang,\n        ?role,\n        ?style,\n        ?spellCheck,\n        ?tabIndex,\n        ?title,\n        ?itemID,\n        ?itemProp,\n        ?itemRef,\n        ?itemScope,\n        ?itemType,\n        ?accept,\n        ?acceptCharset,\n        ?action,\n        ?allowFullScreen,\n        ?async,\n        ?autoComplete,\n        ?autoCapitalize,\n        ?autoFocus,\n        ?autoPlay,\n        ?challenge,\n        ?charSet,\n        ?checked,\n        ?cite,\n        ?crossOrigin,\n        ?cols,\n        ?colSpan,\n        ?content,\n        ?controls,\n        ?coords,\n        ?data,\n        ?dateTime,\n        ?default,\n        ?defer,\n        ?disabled,\n        ?download,\n        ?encType,\n        ?form,\n        ?formAction,\n        ?formTarget,\n        ?formMethod,\n        ?headers,\n        ?high,\n        ?href,\n        ?hrefLang,\n        ?htmlFor,\n        ?httpEquiv,\n        ?icon,\n        ?inputMode,\n        ?integrity,\n        ?keyType,\n        ?kind,\n        ?label,\n        ?list,\n        ?loop,\n        ?low,\n        ?manifest,\n        ?max,\n        ?maxLength,\n        ?media,\n        ?mediaGroup,\n        ?method,\n        ?min,\n        ?minLength,\n        ?multiple,\n        ?muted,\n        ?name,\n        ?nonce,\n        ?noValidate,\n        ?open_,\n        ?optimum,\n        ?pattern,\n        ?placeholder,\n        ?playsInline,\n        ?poster,\n        ?preload,\n        ?radioGroup,\n        ?readOnly,\n        ?rel,\n        ?required,\n        ?reversed,\n        ?rows,\n        ?rowSpan,\n        ?sandbox,\n        ?scope,\n        ?scoped,\n        ?scrolling,\n        ?selected,\n        ?shape,\n        ?size,\n        ?sizes,\n        ?span,\n        ?srcDoc,\n        ?srcLang,\n        ?srcSet,\n        ?start,\n        ?step,\n        ?summary,\n        ?target,\n        ?type_,\n        ?useMap,\n        ?value,\n        ?wrap,\n        ?onCopy,\n        ?onCut,\n        ?onPaste,\n        ?onCompositionEnd,\n        ?onCompositionStart,\n        ?onCompositionUpdate,\n        ?onKeyDown,\n        ?onKeyPress,\n        ?onKeyUp,\n        ?onFocus,\n        ?onBlur,\n        ?onInput,\n        ?onInvalid,\n        ?onContextMenu,\n        ?onDoubleClick,\n        ?onDrag,\n        ?onDragEnd,\n        ?onDragEnter,\n        ?onDragExit,\n        ?onDragLeave,\n        ?onDragOver,\n        ?onDragStart,\n        ?onDrop,\n        ?onMouseDown,\n        ?onMouseEnter,\n        ?onMouseLeave,\n        ?onMouseMove,\n        ?onMouseOut,\n        ?onMouseOver,\n        ?onMouseUp,\n        ?onSelect,\n        ?onTouchCancel,\n        ?onTouchEnd,\n        ?onTouchMove,\n        ?onTouchStart,\n        ?onPointerOver,\n        ?onPointerEnter,\n        ?onPointerDown,\n        ?onPointerMove,\n        ?onPointerUp,\n        ?onPointerCancel,\n        ?onPointerOut,\n        ?onPointerLeave,\n        ?onGotPointerCapture,\n        ?onLostPointerCapture,\n        ?onScroll,\n        ?onWheel,\n        ?onAbort,\n        ?onCanPlay,\n        ?onCanPlayThrough,\n        ?onDurationChange,\n        ?onEmptied,\n        ?onEnded,\n        ?onError,\n        ?onLoadedData,\n        ?onLoadedMetadata,\n        ?onLoadStart,\n        ?onPause,\n        ?onPlay,\n        ?onPlaying,\n        ?onProgress,\n        ?onRateChange,\n        ?onSeeked,\n        ?onSeeking,\n        ?onStalled,\n        ?onSuspend,\n        ?onTimeUpdate,\n        ?onVolumeChange,\n        ?onWaiting,\n        ?onLoad,\n        ?onAnimationStart,\n        ?onAnimationEnd,\n        ?onAnimationIteration,\n        ?onTransitionEnd,\n      },\n      children,\n    )\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/base/Ancestor_Base_Stories.res",
    "content": "open Ancestor\n\nlet default = Storybook.story(~title=\"Components/Base\", ())\n\nlet basicUsage = () => {\n  let s = React.string\n  open Css\n  <Base display={xs: #flex, md: #block} justifyContent={xs: #center} width={xs: 100.->#percent}>\n    <Base\n      _hover={xs: [backgroundColor(#hex(\"363636\"))], md: [backgroundColor(#hex(\"fc0\"))]}\n      display={xs: #flex}\n      flexDirection={xs: #column}\n      justifyContent={xs: #center}\n      alignItems={xs: #center}\n      maxW={xs: 356->#px}\n      borderRadius={xs: 1}\n      p={xs: 3}\n      bgColor={xs: #hex(\"000\"), md: #hex(\"fc0\"), lg: #hex(\"f36\")}\n      tag=#section>\n      <Base\n        border={xs: (2->#px, #solid, #hex(\"f36\"))}\n        borderRadius={xs: 6}\n        height={xs: 96->#px}\n        width={xs: 96->#px}\n        src=\"https://ancestor.rescriptbrasil.org/img/ww-picture.png\"\n        tag=#img\n        mb={xs: 2}\n      />\n      <Typography\n        color={xs: #hex(\"fff\")} m={xs: 0} textAlign={xs: #center} fontSize={xs: 24->#px} tag=#h1>\n        {\"Walter White\"->s}\n      </Typography>\n      <Typography textAlign={xs: #center} color={xs: #hex(\"545454\")} fontSize={xs: 20->#px} tag=#p>\n        {\"Teacher\"->s}\n      </Typography>\n      <Typography\n        mt={xs: 2}\n        textAlign={xs: #center}\n        color={xs: #hex(\"a1a1a1\")}\n        fontSize={xs: 16->#px}\n        lineHeight={xs: 2.4->#rem}\n        tag=#p>\n        {\"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old\"->s}\n      </Typography>\n    </Base>\n  </Base>\n}\n"
  },
  {
    "path": "packages/core/src/components/box/Ancestor_Box.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n  module Base = Ancestor_Base.Make(Config)\n\n  type columns = [\n    | #1\n    | #2\n    | #3\n    | #4\n    | #5\n    | #6\n    | #7\n    | #8\n    | #9\n    | #10\n    | #11\n    | #12\n  ]\n\n  /**\n   * Calculate the columns size based on the value provided.\n   */\n  let basisFromFloat = (value: columns) => (value :> int)->Js.Int.toFloat->(v => v *. 100.0 /. 12.0)\n\n  /**\n   * Specific styles for the API.\n   */\n  let createBox = (~columns=?, ()) => {\n    open Styles.Css\n    let responsiveStyles = Styles.createResponsiveProp(~prop=columns, column => [\n      flexBasis(column->basisFromFloat->#percent),\n    ])\n\n    style(. responsiveStyles)\n  }\n\n  @react.component\n  let make = (\n    // declaration:start\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~px=?,\n    ~py=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // declaration:end\n    // Box props\n    ~columns: option<Config.breakpoints<columns>>=?,\n    // React props\n    ~children=?,\n    ~dangerouslySetInnerHTML=?,\n    ~innerRef=?,\n    // DOM Props\n    ~className=\"\",\n    ~tag: Ancestor_React.tags=#div,\n    ~id=?,\n    ~onClick=?,\n    ~onSubmit=?,\n    ~onChange=?,\n    ~src=?,\n    ~alt=?,\n    ~ariaDetails=?,\n    ~ariaDisabled=?,\n    ~ariaHidden=?,\n    ~ariaKeyshortcuts=?,\n    ~ariaLabel=?,\n    ~ariaRoledescription=?,\n    ~ariaExpanded=?,\n    ~ariaLevel=?,\n    ~ariaModal=?,\n    ~ariaMultiline=?,\n    ~ariaMultiselectable=?,\n    ~ariaPlaceholder=?,\n    ~ariaReadonly=?,\n    ~ariaRequired=?,\n    ~ariaSelected=?,\n    ~ariaSort=?,\n    ~ariaValuemax=?,\n    ~ariaValuemin=?,\n    ~ariaValuenow=?,\n    ~ariaValuetext=?,\n    ~ariaAtomic=?,\n    ~ariaBusy=?,\n    ~ariaRelevant=?,\n    ~ariaGrabbed=?,\n    ~ariaActivedescendant=?,\n    ~ariaColcount=?,\n    ~ariaColindex=?,\n    ~ariaColspan=?,\n    ~ariaControls=?,\n    ~ariaDescribedby=?,\n    ~ariaErrormessage=?,\n    ~ariaFlowto=?,\n    ~ariaLabelledby=?,\n    ~ariaOwns=?,\n    ~ariaPosinset=?,\n    ~ariaRowcount=?,\n    ~ariaRowindex=?,\n    ~ariaRowspan=?,\n    ~ariaSetsize=?,\n    ~defaultChecked=?,\n    ~defaultValue=?,\n    ~accessKey=?,\n    ~contentEditable=?,\n    ~contextMenu=?,\n    ~lang=?,\n    ~role=?,\n    ~style=?,\n    ~spellCheck=?,\n    ~tabIndex=?,\n    ~title=?,\n    ~itemID=?,\n    ~itemProp=?,\n    ~itemRef=?,\n    ~itemScope=?,\n    ~itemType=?,\n    ~accept=?,\n    ~acceptCharset=?,\n    ~action=?,\n    ~allowFullScreen=?,\n    ~async=?,\n    ~autoComplete=?,\n    ~autoCapitalize=?,\n    ~autoFocus=?,\n    ~autoPlay=?,\n    ~challenge=?,\n    ~charSet=?,\n    ~checked=?,\n    ~cite=?,\n    ~crossOrigin=?,\n    ~cols=?,\n    ~colSpan=?,\n    ~content=?,\n    ~controls=?,\n    ~coords=?,\n    ~data=?,\n    ~dateTime=?,\n    ~default=?,\n    ~defer=?,\n    ~disabled=?,\n    ~download=?,\n    ~encType=?,\n    ~form=?,\n    ~formAction=?,\n    ~formTarget=?,\n    ~formMethod=?,\n    ~headers=?,\n    ~high=?,\n    ~href=?,\n    ~hrefLang=?,\n    ~htmlFor=?,\n    ~httpEquiv=?,\n    ~icon=?,\n    ~inputMode=?,\n    ~integrity=?,\n    ~keyType=?,\n    ~kind=?,\n    ~label=?,\n    ~list=?,\n    ~loop=?,\n    ~low=?,\n    ~manifest=?,\n    ~max=?,\n    ~maxLength=?,\n    ~media=?,\n    ~mediaGroup=?,\n    ~method=?,\n    ~min=?,\n    ~minLength=?,\n    ~multiple=?,\n    ~muted=?,\n    ~name=?,\n    ~nonce=?,\n    ~noValidate=?,\n    ~open_=?,\n    ~optimum=?,\n    ~pattern=?,\n    ~placeholder=?,\n    ~playsInline=?,\n    ~poster=?,\n    ~preload=?,\n    ~radioGroup=?,\n    ~readOnly=?,\n    ~rel=?,\n    ~required=?,\n    ~reversed=?,\n    ~rows=?,\n    ~rowSpan=?,\n    ~sandbox=?,\n    ~scope=?,\n    ~scoped=?,\n    ~scrolling=?,\n    ~selected=?,\n    ~shape=?,\n    ~size=?,\n    ~sizes=?,\n    ~span=?,\n    ~srcDoc=?,\n    ~srcLang=?,\n    ~srcSet=?,\n    ~start=?,\n    ~step=?,\n    ~summary=?,\n    ~target=?,\n    ~type_=?,\n    ~useMap=?,\n    ~value=?,\n    ~wrap=?,\n    ~onCopy=?,\n    ~onCut=?,\n    ~onPaste=?,\n    ~onCompositionEnd=?,\n    ~onCompositionStart=?,\n    ~onCompositionUpdate=?,\n    ~onKeyDown=?,\n    ~onKeyPress=?,\n    ~onKeyUp=?,\n    ~onFocus=?,\n    ~onBlur=?,\n    ~onInput=?,\n    ~onInvalid=?,\n    ~onContextMenu=?,\n    ~onDoubleClick=?,\n    ~onDrag=?,\n    ~onDragEnd=?,\n    ~onDragEnter=?,\n    ~onDragExit=?,\n    ~onDragLeave=?,\n    ~onDragOver=?,\n    ~onDragStart=?,\n    ~onDrop=?,\n    ~onMouseDown=?,\n    ~onMouseEnter=?,\n    ~onMouseLeave=?,\n    ~onMouseMove=?,\n    ~onMouseOut=?,\n    ~onMouseOver=?,\n    ~onMouseUp=?,\n    ~onSelect=?,\n    ~onTouchCancel=?,\n    ~onTouchEnd=?,\n    ~onTouchMove=?,\n    ~onTouchStart=?,\n    ~onPointerOver=?,\n    ~onPointerEnter=?,\n    ~onPointerDown=?,\n    ~onPointerMove=?,\n    ~onPointerUp=?,\n    ~onPointerCancel=?,\n    ~onPointerOut=?,\n    ~onPointerLeave=?,\n    ~onGotPointerCapture=?,\n    ~onLostPointerCapture=?,\n    ~onScroll=?,\n    ~onWheel=?,\n    ~onAbort=?,\n    ~onCanPlay=?,\n    ~onCanPlayThrough=?,\n    ~onDurationChange=?,\n    ~onEmptied=?,\n    ~onEnded=?,\n    ~onError=?,\n    ~onLoadedData=?,\n    ~onLoadedMetadata=?,\n    ~onLoadStart=?,\n    ~onPause=?,\n    ~onPlay=?,\n    ~onPlaying=?,\n    ~onProgress=?,\n    ~onRateChange=?,\n    ~onSeeked=?,\n    ~onSeeking=?,\n    ~onStalled=?,\n    ~onSuspend=?,\n    ~onTimeUpdate=?,\n    ~onVolumeChange=?,\n    ~onWaiting=?,\n    ~onLoad=?,\n    ~onAnimationStart=?,\n    ~onAnimationEnd=?,\n    ~onAnimationIteration=?,\n    ~onTransitionEnd=?,\n  ) => {\n    <Base\n      className={\n        let boxClassName = createBox(~columns?, ())\n        `${boxClassName} ${className}`\n      }\n      // forward:start\n      ?borderRadius\n      ?borderTLRadius\n      ?borderTRRadius\n      ?borderBLRadius\n      ?borderBRRadius\n      ?borderStyle\n      ?borderColor\n      ?borderWidth\n      ?borderRightStyle\n      ?borderLeftStyle\n      ?borderTopStyle\n      ?borderBottomStyle\n      ?borderRightColor\n      ?borderLeftColor\n      ?borderTopColor\n      ?borderBottomColor\n      ?borderRightWidth\n      ?borderLeftWidth\n      ?borderTopWidth\n      ?borderBottomWidth\n      ?border\n      ?borderRight\n      ?borderLeft\n      ?borderTop\n      ?borderBottom\n      ?bgColor\n      ?bgSize\n      ?bgPosition\n      ?bgImage\n      ?color\n      ?display\n      ?justifyContent\n      ?flexDirection\n      ?alignItems\n      ?flexBasis\n      ?flexWrap\n      ?flexGrow\n      ?alignContent\n      ?alignSelf\n      ?justifySelf\n      ?gap\n      ?p\n      ?px\n      ?py\n      ?pt\n      ?pb\n      ?pl\n      ?pr\n      ?m\n      ?mx\n      ?my\n      ?mt\n      ?mb\n      ?ml\n      ?mr\n      ?textAlign\n      ?fontFamily\n      ?fontWeight\n      ?fontSize\n      ?letterSpacing\n      ?lineHeight\n      ?width\n      ?height\n      ?minW\n      ?minH\n      ?maxW\n      ?maxH\n      ?position\n      ?top\n      ?bottom\n      ?left\n      ?right\n      ?zIndex\n      ?boxSizing\n      ?overflow\n      ?overflowX\n      ?overflowY\n      ?cursor\n      ?visibility\n      ?listStyleType\n      ?listStylePosition\n      ?listStyleImage\n      ?listStyle\n      ?outlineStyle\n      ?outline\n      ?textDecorationStyle\n      ?textDecorationLine\n      ?textDecoration\n      ?transform\n      ?_focus\n      ?_hover\n      ?_active\n      ?_focusWithin\n      ?_focusVisible\n      ?_disabled\n      ?_before\n      ?_after\n      ?_even\n      ?_odd\n      ?_first\n      ?_last\n      ?_notFirst\n      ?_notLast\n      ?transition\n      ?transitionProperty\n      ?transitionDelay\n      ?transitionDuration\n      ?transitionTimingFunction\n      ?transitions\n      // forward:end\n      // DOM Props\n      tag\n      ?id\n      ?onSubmit\n      ?onClick\n      ?onChange\n      ?dangerouslySetInnerHTML\n      ?src\n      ?alt\n      ?children\n      ?innerRef\n      ?ariaDetails\n      ?ariaDisabled\n      ?ariaHidden\n      ?ariaKeyshortcuts\n      ?ariaLabel\n      ?ariaRoledescription\n      ?ariaExpanded\n      ?ariaLevel\n      ?ariaModal\n      ?ariaMultiline\n      ?ariaMultiselectable\n      ?ariaPlaceholder\n      ?ariaReadonly\n      ?ariaRequired\n      ?ariaSelected\n      ?ariaSort\n      ?ariaValuemax\n      ?ariaValuemin\n      ?ariaValuenow\n      ?ariaValuetext\n      ?ariaAtomic\n      ?ariaBusy\n      ?ariaRelevant\n      ?ariaGrabbed\n      ?ariaActivedescendant\n      ?ariaColcount\n      ?ariaColindex\n      ?ariaColspan\n      ?ariaControls\n      ?ariaDescribedby\n      ?ariaErrormessage\n      ?ariaFlowto\n      ?ariaLabelledby\n      ?ariaOwns\n      ?ariaPosinset\n      ?ariaRowcount\n      ?ariaRowindex\n      ?ariaRowspan\n      ?ariaSetsize\n      ?defaultChecked\n      ?defaultValue\n      ?accessKey\n      ?contentEditable\n      ?contextMenu\n      ?lang\n      ?role\n      ?style\n      ?spellCheck\n      ?tabIndex\n      ?title\n      ?itemID\n      ?itemProp\n      ?itemRef\n      ?itemScope\n      ?itemType\n      ?accept\n      ?acceptCharset\n      ?action\n      ?allowFullScreen\n      ?async\n      ?autoComplete\n      ?autoCapitalize\n      ?autoFocus\n      ?autoPlay\n      ?challenge\n      ?charSet\n      ?checked\n      ?cite\n      ?crossOrigin\n      ?cols\n      ?colSpan\n      ?content\n      ?controls\n      ?coords\n      ?data\n      ?dateTime\n      ?default\n      ?defer\n      ?disabled\n      ?download\n      ?encType\n      ?form\n      ?formAction\n      ?formTarget\n      ?formMethod\n      ?headers\n      ?high\n      ?href\n      ?hrefLang\n      ?htmlFor\n      ?httpEquiv\n      ?icon\n      ?inputMode\n      ?integrity\n      ?keyType\n      ?kind\n      ?label\n      ?list\n      ?loop\n      ?low\n      ?manifest\n      ?max\n      ?maxLength\n      ?media\n      ?mediaGroup\n      ?method\n      ?min\n      ?minLength\n      ?multiple\n      ?muted\n      ?name\n      ?nonce\n      ?noValidate\n      ?open_\n      ?optimum\n      ?pattern\n      ?placeholder\n      ?playsInline\n      ?poster\n      ?preload\n      ?radioGroup\n      ?readOnly\n      ?rel\n      ?required\n      ?reversed\n      ?rows\n      ?rowSpan\n      ?sandbox\n      ?scope\n      ?scoped\n      ?scrolling\n      ?selected\n      ?shape\n      ?size\n      ?sizes\n      ?span\n      ?srcDoc\n      ?srcLang\n      ?srcSet\n      ?start\n      ?step\n      ?summary\n      ?target\n      ?type_\n      ?useMap\n      ?value\n      ?wrap\n      ?onCopy\n      ?onCut\n      ?onPaste\n      ?onCompositionEnd\n      ?onCompositionStart\n      ?onCompositionUpdate\n      ?onKeyDown\n      ?onKeyPress\n      ?onKeyUp\n      ?onFocus\n      ?onBlur\n      ?onInput\n      ?onInvalid\n      ?onContextMenu\n      ?onDoubleClick\n      ?onDrag\n      ?onDragEnd\n      ?onDragEnter\n      ?onDragExit\n      ?onDragLeave\n      ?onDragOver\n      ?onDragStart\n      ?onDrop\n      ?onMouseDown\n      ?onMouseEnter\n      ?onMouseLeave\n      ?onMouseMove\n      ?onMouseOut\n      ?onMouseOver\n      ?onMouseUp\n      ?onSelect\n      ?onTouchCancel\n      ?onTouchEnd\n      ?onTouchMove\n      ?onTouchStart\n      ?onPointerOver\n      ?onPointerEnter\n      ?onPointerDown\n      ?onPointerMove\n      ?onPointerUp\n      ?onPointerCancel\n      ?onPointerOut\n      ?onPointerLeave\n      ?onGotPointerCapture\n      ?onLostPointerCapture\n      ?onScroll\n      ?onWheel\n      ?onAbort\n      ?onCanPlay\n      ?onCanPlayThrough\n      ?onDurationChange\n      ?onEmptied\n      ?onEnded\n      ?onError\n      ?onLoadedData\n      ?onLoadedMetadata\n      ?onLoadStart\n      ?onPause\n      ?onPlay\n      ?onPlaying\n      ?onProgress\n      ?onRateChange\n      ?onSeeked\n      ?onSeeking\n      ?onStalled\n      ?onSuspend\n      ?onTimeUpdate\n      ?onVolumeChange\n      ?onWaiting\n      ?onLoad\n      ?onAnimationStart\n      ?onAnimationEnd\n      ?onAnimationIteration\n      ?onTransitionEnd\n    />\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/box/Ancestor_Box_Stories.res",
    "content": "open Ancestor\n\nlet default = Storybook.story(~title=\"Components/Box\", ())\n\nlet basicUsage = () => {\n  let s = React.string\n\n  <Box p={xs: 4}>\n    <Box\n      borderRadius={xs: 1}\n      bgColor={xs: #hex(\"000\")}\n      p={xs: 4}\n      display={xs: #flex}\n      justifyContent={xs: #flexStart, lg: #spaceBetween}\n      alignItems={xs: #center}\n      flexDirection={xs: #column, lg: #row}>\n      <Box mr={xs: 0, lg: 3}>\n        <Typography\n          mb={xs: 1}\n          textAlign={xs: #center, md: #left}\n          fontSize={xs: 2.8->#rem}\n          color={xs: #hex(\"fff\")}\n          tag=#h1>\n          {`Start using right now`->s}\n        </Typography>\n        <Typography\n          textAlign={xs: #center, md: #left}\n          fontSize={xs: 2.0->#rem}\n          fontWeight={xs: #num(300)}\n          color={xs: #hex(\"b1b1b1\")}\n          lineHeight={xs: 2.8->#rem}\n          tag=#p>\n          {`Ancestor is production-ready and actively maintained. It’s used in production projects daily and keep breaking changes to a minimum whereever possible.`->s}\n        </Typography>\n      </Box>\n    </Box>\n  </Box>\n}\n"
  },
  {
    "path": "packages/core/src/components/grid/Ancestor_Grid.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n  module Base = Ancestor_Base.Make(Config)\n\n  module LocalStyles = {\n    open Styles.Css\n\n    let defaultStyles = [width(100.->#percent), flexWrap(wrap), display(#flex)]\n\n    let grid = (~spacing=?, ()) => {\n      let spacingStyles = Styles.createResponsiveProp(~prop=spacing, ~defaultStyles, spacing => {\n        let spacingInPx = spacing->Config.spacing->Css_AtomicTypes.Length.toString\n        [\n          display(#flex),\n          flexWrap(wrap),\n          width(#calc(#add, 100.0->#percent, spacing->Config.spacing)),\n          marginLeft(spacing),\n          marginTop(spacing),\n          selector(. \"> *\", [boxSizing(borderBox), paddingTop(spacing), paddingLeft(spacing)]),\n          unsafe(\"marginLeft\", `-${spacingInPx}`),\n          unsafe(\"marginTop\", `-${spacingInPx}`),\n        ]\n      })\n\n      style(. spacingStyles)\n    }\n  }\n\n  @react.component\n  let make = (\n    // declaration:start\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~px=?,\n    ~py=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // declaration:end\n    // Grid props\n    ~spacing: option<Config.breakpoints<Config.spacing>>=?,\n    ~tag: Ancestor_React.tags=#div,\n    // React props\n    ~children=?,\n    ~dangerouslySetInnerHTML=?,\n    ~innerRef=?,\n    // DOM Props\n    ~className=\"\",\n    ~id=?,\n    ~onClick=?,\n    ~onSubmit=?,\n    ~onChange=?,\n    ~src=?,\n    ~alt=?,\n    ~ariaDetails=?,\n    ~ariaDisabled=?,\n    ~ariaHidden=?,\n    ~ariaKeyshortcuts=?,\n    ~ariaLabel=?,\n    ~ariaRoledescription=?,\n    ~ariaExpanded=?,\n    ~ariaLevel=?,\n    ~ariaModal=?,\n    ~ariaMultiline=?,\n    ~ariaMultiselectable=?,\n    ~ariaPlaceholder=?,\n    ~ariaReadonly=?,\n    ~ariaRequired=?,\n    ~ariaSelected=?,\n    ~ariaSort=?,\n    ~ariaValuemax=?,\n    ~ariaValuemin=?,\n    ~ariaValuenow=?,\n    ~ariaValuetext=?,\n    ~ariaAtomic=?,\n    ~ariaBusy=?,\n    ~ariaRelevant=?,\n    ~ariaGrabbed=?,\n    ~ariaActivedescendant=?,\n    ~ariaColcount=?,\n    ~ariaColindex=?,\n    ~ariaColspan=?,\n    ~ariaControls=?,\n    ~ariaDescribedby=?,\n    ~ariaErrormessage=?,\n    ~ariaFlowto=?,\n    ~ariaLabelledby=?,\n    ~ariaOwns=?,\n    ~ariaPosinset=?,\n    ~ariaRowcount=?,\n    ~ariaRowindex=?,\n    ~ariaRowspan=?,\n    ~ariaSetsize=?,\n    ~defaultChecked=?,\n    ~defaultValue=?,\n    ~accessKey=?,\n    ~contentEditable=?,\n    ~contextMenu=?,\n    ~lang=?,\n    ~role=?,\n    ~style=?,\n    ~spellCheck=?,\n    ~tabIndex=?,\n    ~title=?,\n    ~itemID=?,\n    ~itemProp=?,\n    ~itemRef=?,\n    ~itemScope=?,\n    ~itemType=?,\n    ~accept=?,\n    ~acceptCharset=?,\n    ~action=?,\n    ~allowFullScreen=?,\n    ~async=?,\n    ~autoComplete=?,\n    ~autoCapitalize=?,\n    ~autoFocus=?,\n    ~autoPlay=?,\n    ~challenge=?,\n    ~charSet=?,\n    ~checked=?,\n    ~cite=?,\n    ~crossOrigin=?,\n    ~cols=?,\n    ~colSpan=?,\n    ~content=?,\n    ~controls=?,\n    ~coords=?,\n    ~data=?,\n    ~dateTime=?,\n    ~default=?,\n    ~defer=?,\n    ~disabled=?,\n    ~download=?,\n    ~encType=?,\n    ~form=?,\n    ~formAction=?,\n    ~formTarget=?,\n    ~formMethod=?,\n    ~headers=?,\n    ~high=?,\n    ~href=?,\n    ~hrefLang=?,\n    ~htmlFor=?,\n    ~httpEquiv=?,\n    ~icon=?,\n    ~inputMode=?,\n    ~integrity=?,\n    ~keyType=?,\n    ~kind=?,\n    ~label=?,\n    ~list=?,\n    ~loop=?,\n    ~low=?,\n    ~manifest=?,\n    ~max=?,\n    ~maxLength=?,\n    ~media=?,\n    ~mediaGroup=?,\n    ~method=?,\n    ~min=?,\n    ~minLength=?,\n    ~multiple=?,\n    ~muted=?,\n    ~name=?,\n    ~nonce=?,\n    ~noValidate=?,\n    ~open_=?,\n    ~optimum=?,\n    ~pattern=?,\n    ~placeholder=?,\n    ~playsInline=?,\n    ~poster=?,\n    ~preload=?,\n    ~radioGroup=?,\n    ~readOnly=?,\n    ~rel=?,\n    ~required=?,\n    ~reversed=?,\n    ~rows=?,\n    ~rowSpan=?,\n    ~sandbox=?,\n    ~scope=?,\n    ~scoped=?,\n    ~scrolling=?,\n    ~selected=?,\n    ~shape=?,\n    ~size=?,\n    ~sizes=?,\n    ~span=?,\n    ~srcDoc=?,\n    ~srcLang=?,\n    ~srcSet=?,\n    ~start=?,\n    ~step=?,\n    ~summary=?,\n    ~target=?,\n    ~type_=?,\n    ~useMap=?,\n    ~value=?,\n    ~wrap=?,\n    ~onCopy=?,\n    ~onCut=?,\n    ~onPaste=?,\n    ~onCompositionEnd=?,\n    ~onCompositionStart=?,\n    ~onCompositionUpdate=?,\n    ~onKeyDown=?,\n    ~onKeyPress=?,\n    ~onKeyUp=?,\n    ~onFocus=?,\n    ~onBlur=?,\n    ~onInput=?,\n    ~onInvalid=?,\n    ~onContextMenu=?,\n    ~onDoubleClick=?,\n    ~onDrag=?,\n    ~onDragEnd=?,\n    ~onDragEnter=?,\n    ~onDragExit=?,\n    ~onDragLeave=?,\n    ~onDragOver=?,\n    ~onDragStart=?,\n    ~onDrop=?,\n    ~onMouseDown=?,\n    ~onMouseEnter=?,\n    ~onMouseLeave=?,\n    ~onMouseMove=?,\n    ~onMouseOut=?,\n    ~onMouseOver=?,\n    ~onMouseUp=?,\n    ~onSelect=?,\n    ~onTouchCancel=?,\n    ~onTouchEnd=?,\n    ~onTouchMove=?,\n    ~onTouchStart=?,\n    ~onPointerOver=?,\n    ~onPointerEnter=?,\n    ~onPointerDown=?,\n    ~onPointerMove=?,\n    ~onPointerUp=?,\n    ~onPointerCancel=?,\n    ~onPointerOut=?,\n    ~onPointerLeave=?,\n    ~onGotPointerCapture=?,\n    ~onLostPointerCapture=?,\n    ~onScroll=?,\n    ~onWheel=?,\n    ~onAbort=?,\n    ~onCanPlay=?,\n    ~onCanPlayThrough=?,\n    ~onDurationChange=?,\n    ~onEmptied=?,\n    ~onEnded=?,\n    ~onError=?,\n    ~onLoadedData=?,\n    ~onLoadedMetadata=?,\n    ~onLoadStart=?,\n    ~onPause=?,\n    ~onPlay=?,\n    ~onPlaying=?,\n    ~onProgress=?,\n    ~onRateChange=?,\n    ~onSeeked=?,\n    ~onSeeking=?,\n    ~onStalled=?,\n    ~onSuspend=?,\n    ~onTimeUpdate=?,\n    ~onVolumeChange=?,\n    ~onWaiting=?,\n    ~onLoad=?,\n    ~onAnimationStart=?,\n    ~onAnimationEnd=?,\n    ~onAnimationIteration=?,\n    ~onTransitionEnd=?,\n  ) => {\n    <Base\n      className={`${LocalStyles.grid(~spacing?, ())} ${className}`}\n      // forward:start\n      ?borderRadius\n      ?borderTLRadius\n      ?borderTRRadius\n      ?borderBLRadius\n      ?borderBRRadius\n      ?borderStyle\n      ?borderColor\n      ?borderWidth\n      ?borderRightStyle\n      ?borderLeftStyle\n      ?borderTopStyle\n      ?borderBottomStyle\n      ?borderRightColor\n      ?borderLeftColor\n      ?borderTopColor\n      ?borderBottomColor\n      ?borderRightWidth\n      ?borderLeftWidth\n      ?borderTopWidth\n      ?borderBottomWidth\n      ?border\n      ?borderRight\n      ?borderLeft\n      ?borderTop\n      ?borderBottom\n      ?bgColor\n      ?bgSize\n      ?bgPosition\n      ?bgImage\n      ?color\n      ?display\n      ?justifyContent\n      ?flexDirection\n      ?alignItems\n      ?flexBasis\n      ?flexWrap\n      ?flexGrow\n      ?alignContent\n      ?alignSelf\n      ?justifySelf\n      ?gap\n      ?p\n      ?px\n      ?py\n      ?pt\n      ?pb\n      ?pl\n      ?pr\n      ?m\n      ?mx\n      ?my\n      ?mt\n      ?mb\n      ?ml\n      ?mr\n      ?textAlign\n      ?fontFamily\n      ?fontWeight\n      ?fontSize\n      ?letterSpacing\n      ?lineHeight\n      ?width\n      ?height\n      ?minW\n      ?minH\n      ?maxW\n      ?maxH\n      ?position\n      ?top\n      ?bottom\n      ?left\n      ?right\n      ?zIndex\n      ?boxSizing\n      ?overflow\n      ?overflowX\n      ?overflowY\n      ?cursor\n      ?visibility\n      ?listStyleType\n      ?listStylePosition\n      ?listStyleImage\n      ?listStyle\n      ?outlineStyle\n      ?outline\n      ?textDecorationStyle\n      ?textDecorationLine\n      ?textDecoration\n      ?transform\n      ?_focus\n      ?_hover\n      ?_active\n      ?_focusWithin\n      ?_focusVisible\n      ?_disabled\n      ?_before\n      ?_after\n      ?_even\n      ?_odd\n      ?_first\n      ?_last\n      ?_notFirst\n      ?_notLast\n      ?transition\n      ?transitionProperty\n      ?transitionDelay\n      ?transitionDuration\n      ?transitionTimingFunction\n      ?transitions\n      // forward:end\n      // DOM Props\n      tag\n      ?id\n      ?onSubmit\n      ?onClick\n      ?onChange\n      ?dangerouslySetInnerHTML\n      ?src\n      ?alt\n      ?children\n      ?innerRef\n      ?ariaDetails\n      ?ariaDisabled\n      ?ariaHidden\n      ?ariaKeyshortcuts\n      ?ariaLabel\n      ?ariaRoledescription\n      ?ariaExpanded\n      ?ariaLevel\n      ?ariaModal\n      ?ariaMultiline\n      ?ariaMultiselectable\n      ?ariaPlaceholder\n      ?ariaReadonly\n      ?ariaRequired\n      ?ariaSelected\n      ?ariaSort\n      ?ariaValuemax\n      ?ariaValuemin\n      ?ariaValuenow\n      ?ariaValuetext\n      ?ariaAtomic\n      ?ariaBusy\n      ?ariaRelevant\n      ?ariaGrabbed\n      ?ariaActivedescendant\n      ?ariaColcount\n      ?ariaColindex\n      ?ariaColspan\n      ?ariaControls\n      ?ariaDescribedby\n      ?ariaErrormessage\n      ?ariaFlowto\n      ?ariaLabelledby\n      ?ariaOwns\n      ?ariaPosinset\n      ?ariaRowcount\n      ?ariaRowindex\n      ?ariaRowspan\n      ?ariaSetsize\n      ?defaultChecked\n      ?defaultValue\n      ?accessKey\n      ?contentEditable\n      ?contextMenu\n      ?lang\n      ?role\n      ?style\n      ?spellCheck\n      ?tabIndex\n      ?title\n      ?itemID\n      ?itemProp\n      ?itemRef\n      ?itemScope\n      ?itemType\n      ?accept\n      ?acceptCharset\n      ?action\n      ?allowFullScreen\n      ?async\n      ?autoComplete\n      ?autoCapitalize\n      ?autoFocus\n      ?autoPlay\n      ?challenge\n      ?charSet\n      ?checked\n      ?cite\n      ?crossOrigin\n      ?cols\n      ?colSpan\n      ?content\n      ?controls\n      ?coords\n      ?data\n      ?dateTime\n      ?default\n      ?defer\n      ?disabled\n      ?download\n      ?encType\n      ?form\n      ?formAction\n      ?formTarget\n      ?formMethod\n      ?headers\n      ?high\n      ?href\n      ?hrefLang\n      ?htmlFor\n      ?httpEquiv\n      ?icon\n      ?inputMode\n      ?integrity\n      ?keyType\n      ?kind\n      ?label\n      ?list\n      ?loop\n      ?low\n      ?manifest\n      ?max\n      ?maxLength\n      ?media\n      ?mediaGroup\n      ?method\n      ?min\n      ?minLength\n      ?multiple\n      ?muted\n      ?name\n      ?nonce\n      ?noValidate\n      ?open_\n      ?optimum\n      ?pattern\n      ?placeholder\n      ?playsInline\n      ?poster\n      ?preload\n      ?radioGroup\n      ?readOnly\n      ?rel\n      ?required\n      ?reversed\n      ?rows\n      ?rowSpan\n      ?sandbox\n      ?scope\n      ?scoped\n      ?scrolling\n      ?selected\n      ?shape\n      ?size\n      ?sizes\n      ?span\n      ?srcDoc\n      ?srcLang\n      ?srcSet\n      ?start\n      ?step\n      ?summary\n      ?target\n      ?type_\n      ?useMap\n      ?value\n      ?wrap\n      ?onCopy\n      ?onCut\n      ?onPaste\n      ?onCompositionEnd\n      ?onCompositionStart\n      ?onCompositionUpdate\n      ?onKeyDown\n      ?onKeyPress\n      ?onKeyUp\n      ?onFocus\n      ?onBlur\n      ?onInput\n      ?onInvalid\n      ?onContextMenu\n      ?onDoubleClick\n      ?onDrag\n      ?onDragEnd\n      ?onDragEnter\n      ?onDragExit\n      ?onDragLeave\n      ?onDragOver\n      ?onDragStart\n      ?onDrop\n      ?onMouseDown\n      ?onMouseEnter\n      ?onMouseLeave\n      ?onMouseMove\n      ?onMouseOut\n      ?onMouseOver\n      ?onMouseUp\n      ?onSelect\n      ?onTouchCancel\n      ?onTouchEnd\n      ?onTouchMove\n      ?onTouchStart\n      ?onPointerOver\n      ?onPointerEnter\n      ?onPointerDown\n      ?onPointerMove\n      ?onPointerUp\n      ?onPointerCancel\n      ?onPointerOut\n      ?onPointerLeave\n      ?onGotPointerCapture\n      ?onLostPointerCapture\n      ?onScroll\n      ?onWheel\n      ?onAbort\n      ?onCanPlay\n      ?onCanPlayThrough\n      ?onDurationChange\n      ?onEmptied\n      ?onEnded\n      ?onError\n      ?onLoadedData\n      ?onLoadedMetadata\n      ?onLoadStart\n      ?onPause\n      ?onPlay\n      ?onPlaying\n      ?onProgress\n      ?onRateChange\n      ?onSeeked\n      ?onSeeking\n      ?onStalled\n      ?onSuspend\n      ?onTimeUpdate\n      ?onVolumeChange\n      ?onWaiting\n      ?onLoad\n      ?onAnimationStart\n      ?onAnimationEnd\n      ?onAnimationIteration\n      ?onTransitionEnd\n    />\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/grid/Ancestor_Grid_Stories.res",
    "content": "open Ancestor\n\nlet default = Storybook.story(~title=\"Components/Grid\", ())\n\nlet basicUsage = () => {\n  let placeholder = Emotion.rawCss(`\n    padding: 32px;\n    border: solid 2px #f36;\n    background: #ff336629;\n    text-align: center;\n    font-weight: 700;\n    color: #f36;\n    border-radius: 4px;\n    font-size: 1.8rem;\n    width: 100%;\n  `)\n  <Box p={xs: 4}>\n    <Grid justifyContent={xs: #spaceBetween} spacing={xs: 1, md: 3}>\n      <Box columns={xs: #12, md: #6}>\n        <div className=placeholder> {\"6\"->React.string} </div>\n      </Box>\n      <Box columns={xs: #12, md: #6}>\n        <div className=placeholder> {\"6\"->React.string} </div>\n      </Box>\n      <Box columns={xs: #12}>\n        <div className=placeholder> {\"12\"->React.string} </div>\n      </Box>\n      <Box columns={xs: #12, md: #4}>\n        <div className=placeholder> {\"4\"->React.string} </div>\n      </Box>\n      <Box columns={xs: #12, md: #4}>\n        <div className=placeholder> {\"4\"->React.string} </div>\n      </Box>\n      <Box columns={xs: #12, md: #4}>\n        <div className=placeholder> {\"4\"->React.string} </div>\n      </Box>\n    </Grid>\n  </Box>\n}\n"
  },
  {
    "path": "packages/core/src/components/hidden/Ancestor_Hidden.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n  module Base = Ancestor_Base.Make(Config)\n\n  let createHidden = (~on, ()) => {\n    open Styles.Css\n\n    /**\n     * Reference: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss#L8\n     */\n    let hiddenStyles = [\n      position(absolute),\n      width(1->#px),\n      height(1->#px),\n      CssJs.padding(#zero),\n      overflow(#hidden),\n      unsafe(\"clip\", \"rect(0, 0, 0, 0)\"),\n      whiteSpace(#nowrap),\n      borderStyle(#none),\n    ]\n\n    let visibleStyles = [\n      position(#static),\n      width(#auto),\n      height(#auto),\n      CssJs.padding(#zero),\n      overflow(#visible),\n      whiteSpace(#normal),\n      borderStyle(#initial),\n      unsafe(\"clip\", \"initial\"),\n    ]\n\n    let onStyles = Styles.createResponsiveProp(~prop=on, on =>\n      switch on {\n      | false => visibleStyles\n      | true => hiddenStyles\n      }\n    )\n\n    style(. onStyles)\n  }\n\n  @react.component\n  let make = (\n    ~on: option<Config.breakpoints<bool>>=?,\n    // declaration:start\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~px=?,\n    ~py=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // declaration:end\n    // React props\n    ~children=?,\n    ~dangerouslySetInnerHTML=?,\n    ~innerRef=?,\n    // DOM Props\n    ~className=\"\",\n    ~tag: Ancestor_React.tags=#div,\n    ~id=?,\n    ~onClick=?,\n    ~onSubmit=?,\n    ~onChange=?,\n    ~src=?,\n    ~alt=?,\n    ~ariaDetails=?,\n    ~ariaDisabled=?,\n    ~ariaHidden=?,\n    ~ariaKeyshortcuts=?,\n    ~ariaLabel=?,\n    ~ariaRoledescription=?,\n    ~ariaExpanded=?,\n    ~ariaLevel=?,\n    ~ariaModal=?,\n    ~ariaMultiline=?,\n    ~ariaMultiselectable=?,\n    ~ariaPlaceholder=?,\n    ~ariaReadonly=?,\n    ~ariaRequired=?,\n    ~ariaSelected=?,\n    ~ariaSort=?,\n    ~ariaValuemax=?,\n    ~ariaValuemin=?,\n    ~ariaValuenow=?,\n    ~ariaValuetext=?,\n    ~ariaAtomic=?,\n    ~ariaBusy=?,\n    ~ariaRelevant=?,\n    ~ariaGrabbed=?,\n    ~ariaActivedescendant=?,\n    ~ariaColcount=?,\n    ~ariaColindex=?,\n    ~ariaColspan=?,\n    ~ariaControls=?,\n    ~ariaDescribedby=?,\n    ~ariaErrormessage=?,\n    ~ariaFlowto=?,\n    ~ariaLabelledby=?,\n    ~ariaOwns=?,\n    ~ariaPosinset=?,\n    ~ariaRowcount=?,\n    ~ariaRowindex=?,\n    ~ariaRowspan=?,\n    ~ariaSetsize=?,\n    ~defaultChecked=?,\n    ~defaultValue=?,\n    ~accessKey=?,\n    ~contentEditable=?,\n    ~contextMenu=?,\n    ~lang=?,\n    ~role=?,\n    ~style=?,\n    ~spellCheck=?,\n    ~tabIndex=?,\n    ~title=?,\n    ~itemID=?,\n    ~itemProp=?,\n    ~itemRef=?,\n    ~itemScope=?,\n    ~itemType=?,\n    ~accept=?,\n    ~acceptCharset=?,\n    ~action=?,\n    ~allowFullScreen=?,\n    ~async=?,\n    ~autoComplete=?,\n    ~autoCapitalize=?,\n    ~autoFocus=?,\n    ~autoPlay=?,\n    ~challenge=?,\n    ~charSet=?,\n    ~checked=?,\n    ~cite=?,\n    ~crossOrigin=?,\n    ~cols=?,\n    ~colSpan=?,\n    ~content=?,\n    ~controls=?,\n    ~coords=?,\n    ~data=?,\n    ~dateTime=?,\n    ~default=?,\n    ~defer=?,\n    ~disabled=?,\n    ~download=?,\n    ~encType=?,\n    ~form=?,\n    ~formAction=?,\n    ~formTarget=?,\n    ~formMethod=?,\n    ~headers=?,\n    ~high=?,\n    ~href=?,\n    ~hrefLang=?,\n    ~htmlFor=?,\n    ~httpEquiv=?,\n    ~icon=?,\n    ~inputMode=?,\n    ~integrity=?,\n    ~keyType=?,\n    ~kind=?,\n    ~label=?,\n    ~list=?,\n    ~loop=?,\n    ~low=?,\n    ~manifest=?,\n    ~max=?,\n    ~maxLength=?,\n    ~media=?,\n    ~mediaGroup=?,\n    ~method=?,\n    ~min=?,\n    ~minLength=?,\n    ~multiple=?,\n    ~muted=?,\n    ~name=?,\n    ~nonce=?,\n    ~noValidate=?,\n    ~open_=?,\n    ~optimum=?,\n    ~pattern=?,\n    ~placeholder=?,\n    ~playsInline=?,\n    ~poster=?,\n    ~preload=?,\n    ~radioGroup=?,\n    ~readOnly=?,\n    ~rel=?,\n    ~required=?,\n    ~reversed=?,\n    ~rows=?,\n    ~rowSpan=?,\n    ~sandbox=?,\n    ~scope=?,\n    ~scoped=?,\n    ~scrolling=?,\n    ~selected=?,\n    ~shape=?,\n    ~size=?,\n    ~sizes=?,\n    ~span=?,\n    ~srcDoc=?,\n    ~srcLang=?,\n    ~srcSet=?,\n    ~start=?,\n    ~step=?,\n    ~summary=?,\n    ~target=?,\n    ~type_=?,\n    ~useMap=?,\n    ~value=?,\n    ~wrap=?,\n    ~onCopy=?,\n    ~onCut=?,\n    ~onPaste=?,\n    ~onCompositionEnd=?,\n    ~onCompositionStart=?,\n    ~onCompositionUpdate=?,\n    ~onKeyDown=?,\n    ~onKeyPress=?,\n    ~onKeyUp=?,\n    ~onFocus=?,\n    ~onBlur=?,\n    ~onInput=?,\n    ~onInvalid=?,\n    ~onContextMenu=?,\n    ~onDoubleClick=?,\n    ~onDrag=?,\n    ~onDragEnd=?,\n    ~onDragEnter=?,\n    ~onDragExit=?,\n    ~onDragLeave=?,\n    ~onDragOver=?,\n    ~onDragStart=?,\n    ~onDrop=?,\n    ~onMouseDown=?,\n    ~onMouseEnter=?,\n    ~onMouseLeave=?,\n    ~onMouseMove=?,\n    ~onMouseOut=?,\n    ~onMouseOver=?,\n    ~onMouseUp=?,\n    ~onSelect=?,\n    ~onTouchCancel=?,\n    ~onTouchEnd=?,\n    ~onTouchMove=?,\n    ~onTouchStart=?,\n    ~onPointerOver=?,\n    ~onPointerEnter=?,\n    ~onPointerDown=?,\n    ~onPointerMove=?,\n    ~onPointerUp=?,\n    ~onPointerCancel=?,\n    ~onPointerOut=?,\n    ~onPointerLeave=?,\n    ~onGotPointerCapture=?,\n    ~onLostPointerCapture=?,\n    ~onScroll=?,\n    ~onWheel=?,\n    ~onAbort=?,\n    ~onCanPlay=?,\n    ~onCanPlayThrough=?,\n    ~onDurationChange=?,\n    ~onEmptied=?,\n    ~onEnded=?,\n    ~onError=?,\n    ~onLoadedData=?,\n    ~onLoadedMetadata=?,\n    ~onLoadStart=?,\n    ~onPause=?,\n    ~onPlay=?,\n    ~onPlaying=?,\n    ~onProgress=?,\n    ~onRateChange=?,\n    ~onSeeked=?,\n    ~onSeeking=?,\n    ~onStalled=?,\n    ~onSuspend=?,\n    ~onTimeUpdate=?,\n    ~onVolumeChange=?,\n    ~onWaiting=?,\n    ~onLoad=?,\n    ~onAnimationStart=?,\n    ~onAnimationEnd=?,\n    ~onAnimationIteration=?,\n    ~onTransitionEnd=?,\n  ) => {\n    <Base\n      className={\n        let hiddenClassName = createHidden(~on, ())\n        `${hiddenClassName} ${className}`\n      }\n      // forward:start\n      ?borderRadius\n      ?borderTLRadius\n      ?borderTRRadius\n      ?borderBLRadius\n      ?borderBRRadius\n      ?borderStyle\n      ?borderColor\n      ?borderWidth\n      ?borderRightStyle\n      ?borderLeftStyle\n      ?borderTopStyle\n      ?borderBottomStyle\n      ?borderRightColor\n      ?borderLeftColor\n      ?borderTopColor\n      ?borderBottomColor\n      ?borderRightWidth\n      ?borderLeftWidth\n      ?borderTopWidth\n      ?borderBottomWidth\n      ?border\n      ?borderRight\n      ?borderLeft\n      ?borderTop\n      ?borderBottom\n      ?bgColor\n      ?bgSize\n      ?bgPosition\n      ?bgImage\n      ?color\n      ?display\n      ?justifyContent\n      ?flexDirection\n      ?alignItems\n      ?flexBasis\n      ?flexWrap\n      ?flexGrow\n      ?alignContent\n      ?alignSelf\n      ?justifySelf\n      ?gap\n      ?p\n      ?px\n      ?py\n      ?pt\n      ?pb\n      ?pl\n      ?pr\n      ?m\n      ?mx\n      ?my\n      ?mt\n      ?mb\n      ?ml\n      ?mr\n      ?textAlign\n      ?fontFamily\n      ?fontWeight\n      ?fontSize\n      ?letterSpacing\n      ?lineHeight\n      ?width\n      ?height\n      ?minW\n      ?minH\n      ?maxW\n      ?maxH\n      ?position\n      ?top\n      ?bottom\n      ?left\n      ?right\n      ?zIndex\n      ?boxSizing\n      ?overflow\n      ?overflowX\n      ?overflowY\n      ?cursor\n      ?visibility\n      ?listStyleType\n      ?listStylePosition\n      ?listStyleImage\n      ?listStyle\n      ?outlineStyle\n      ?outline\n      ?textDecorationStyle\n      ?textDecorationLine\n      ?textDecoration\n      ?transform\n      ?_focus\n      ?_hover\n      ?_active\n      ?_focusWithin\n      ?_focusVisible\n      ?_disabled\n      ?_before\n      ?_after\n      ?_even\n      ?_odd\n      ?_first\n      ?_last\n      ?_notFirst\n      ?_notLast\n      ?transition\n      ?transitionProperty\n      ?transitionDelay\n      ?transitionDuration\n      ?transitionTimingFunction\n      ?transitions\n      // forward:end\n      // DOM Props\n      tag\n      ?id\n      ?onSubmit\n      ?onClick\n      ?onChange\n      ?dangerouslySetInnerHTML\n      ?src\n      ?alt\n      ?children\n      ?innerRef\n      ?ariaDetails\n      ?ariaDisabled\n      ?ariaHidden\n      ?ariaKeyshortcuts\n      ?ariaLabel\n      ?ariaRoledescription\n      ?ariaExpanded\n      ?ariaLevel\n      ?ariaModal\n      ?ariaMultiline\n      ?ariaMultiselectable\n      ?ariaPlaceholder\n      ?ariaReadonly\n      ?ariaRequired\n      ?ariaSelected\n      ?ariaSort\n      ?ariaValuemax\n      ?ariaValuemin\n      ?ariaValuenow\n      ?ariaValuetext\n      ?ariaAtomic\n      ?ariaBusy\n      ?ariaRelevant\n      ?ariaGrabbed\n      ?ariaActivedescendant\n      ?ariaColcount\n      ?ariaColindex\n      ?ariaColspan\n      ?ariaControls\n      ?ariaDescribedby\n      ?ariaErrormessage\n      ?ariaFlowto\n      ?ariaLabelledby\n      ?ariaOwns\n      ?ariaPosinset\n      ?ariaRowcount\n      ?ariaRowindex\n      ?ariaRowspan\n      ?ariaSetsize\n      ?defaultChecked\n      ?defaultValue\n      ?accessKey\n      ?contentEditable\n      ?contextMenu\n      ?lang\n      ?role\n      ?style\n      ?spellCheck\n      ?tabIndex\n      ?title\n      ?itemID\n      ?itemProp\n      ?itemRef\n      ?itemScope\n      ?itemType\n      ?accept\n      ?acceptCharset\n      ?action\n      ?allowFullScreen\n      ?async\n      ?autoComplete\n      ?autoCapitalize\n      ?autoFocus\n      ?autoPlay\n      ?challenge\n      ?charSet\n      ?checked\n      ?cite\n      ?crossOrigin\n      ?cols\n      ?colSpan\n      ?content\n      ?controls\n      ?coords\n      ?data\n      ?dateTime\n      ?default\n      ?defer\n      ?disabled\n      ?download\n      ?encType\n      ?form\n      ?formAction\n      ?formTarget\n      ?formMethod\n      ?headers\n      ?high\n      ?href\n      ?hrefLang\n      ?htmlFor\n      ?httpEquiv\n      ?icon\n      ?inputMode\n      ?integrity\n      ?keyType\n      ?kind\n      ?label\n      ?list\n      ?loop\n      ?low\n      ?manifest\n      ?max\n      ?maxLength\n      ?media\n      ?mediaGroup\n      ?method\n      ?min\n      ?minLength\n      ?multiple\n      ?muted\n      ?name\n      ?nonce\n      ?noValidate\n      ?open_\n      ?optimum\n      ?pattern\n      ?placeholder\n      ?playsInline\n      ?poster\n      ?preload\n      ?radioGroup\n      ?readOnly\n      ?rel\n      ?required\n      ?reversed\n      ?rows\n      ?rowSpan\n      ?sandbox\n      ?scope\n      ?scoped\n      ?scrolling\n      ?selected\n      ?shape\n      ?size\n      ?sizes\n      ?span\n      ?srcDoc\n      ?srcLang\n      ?srcSet\n      ?start\n      ?step\n      ?summary\n      ?target\n      ?type_\n      ?useMap\n      ?value\n      ?wrap\n      ?onCopy\n      ?onCut\n      ?onPaste\n      ?onCompositionEnd\n      ?onCompositionStart\n      ?onCompositionUpdate\n      ?onKeyDown\n      ?onKeyPress\n      ?onKeyUp\n      ?onFocus\n      ?onBlur\n      ?onInput\n      ?onInvalid\n      ?onContextMenu\n      ?onDoubleClick\n      ?onDrag\n      ?onDragEnd\n      ?onDragEnter\n      ?onDragExit\n      ?onDragLeave\n      ?onDragOver\n      ?onDragStart\n      ?onDrop\n      ?onMouseDown\n      ?onMouseEnter\n      ?onMouseLeave\n      ?onMouseMove\n      ?onMouseOut\n      ?onMouseOver\n      ?onMouseUp\n      ?onSelect\n      ?onTouchCancel\n      ?onTouchEnd\n      ?onTouchMove\n      ?onTouchStart\n      ?onPointerOver\n      ?onPointerEnter\n      ?onPointerDown\n      ?onPointerMove\n      ?onPointerUp\n      ?onPointerCancel\n      ?onPointerOut\n      ?onPointerLeave\n      ?onGotPointerCapture\n      ?onLostPointerCapture\n      ?onScroll\n      ?onWheel\n      ?onAbort\n      ?onCanPlay\n      ?onCanPlayThrough\n      ?onDurationChange\n      ?onEmptied\n      ?onEnded\n      ?onError\n      ?onLoadedData\n      ?onLoadedMetadata\n      ?onLoadStart\n      ?onPause\n      ?onPlay\n      ?onPlaying\n      ?onProgress\n      ?onRateChange\n      ?onSeeked\n      ?onSeeking\n      ?onStalled\n      ?onSuspend\n      ?onTimeUpdate\n      ?onVolumeChange\n      ?onWaiting\n      ?onLoad\n      ?onAnimationStart\n      ?onAnimationEnd\n      ?onAnimationIteration\n      ?onTransitionEnd\n    />\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/hidden/Ancestor_Hidden_Stories.res",
    "content": "open Ancestor\nopen Ancestor_Helpers\n\nlet default = Storybook.story(~title=\"Components/Hidden\", ())\n\nlet basicUsage = () => {\n  <Box>\n    <Hidden on={xs: true, md: false}>\n      <Placeholder width={xs: 224->#px}> {\"Only visible above md\"->React.string} </Placeholder>\n    </Hidden>\n    <Hidden on={md: true}>\n      <Placeholder width={xs: 224->#px}> {\"Only visible below md\"->React.string} </Placeholder>\n    </Hidden>\n  </Box>\n}\n"
  },
  {
    "path": "packages/core/src/components/stack/Ancestor_Stack.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n  module Base = Ancestor_Base.Make(Config)\n\n  type direction = [\n    | #vertical\n    | #horizontal\n  ]\n\n  /**\n   * Specific styles for the API.\n   */\n  module LocalStyles = {\n    open Styles.Css\n\n    let baseStyles = [display(#flex)]\n\n    let createStack = (~direction=?, ()) => {\n      let directionStyles = Styles.createResponsiveProp(\n        ~prop=direction,\n        ~defaultStyles=[flexDirection(#column)],\n        direction =>\n          switch direction {\n          | #vertical => [flexDirection(#column)]\n          | #horizontal => [flexDirection(#row)]\n          },\n      )\n\n      let styles = Belt.Array.concatMany([baseStyles, directionStyles])\n\n      style(. styles)\n    }\n  }\n\n  let renderWithDivider = (children, divider) => {\n    let total = React.Children.count(children)\n    children->React.Children.mapWithIndex((element, index) => {\n      if index == total - 1 {\n        element\n      } else {\n        <>\n          element\n          divider\n        </>\n      }\n    })\n  }\n\n  @react.component\n  let make = (\n    // Stack props\n    ~direction: option<Config.breakpoints<direction>>=?,\n    ~divider: option<React.element>=?,\n    // declaration:start\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~px=?,\n    ~py=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // declaration:end\n    // React props\n    ~children=?,\n    ~dangerouslySetInnerHTML=?,\n    ~innerRef=?,\n    // DOM Props\n    ~className=\"\",\n    ~tag: Ancestor_React.tags=#div,\n    ~id=?,\n    ~onClick=?,\n    ~onSubmit=?,\n    ~onChange=?,\n    ~src=?,\n    ~alt=?,\n    ~ariaDetails=?,\n    ~ariaDisabled=?,\n    ~ariaHidden=?,\n    ~ariaKeyshortcuts=?,\n    ~ariaLabel=?,\n    ~ariaRoledescription=?,\n    ~ariaExpanded=?,\n    ~ariaLevel=?,\n    ~ariaModal=?,\n    ~ariaMultiline=?,\n    ~ariaMultiselectable=?,\n    ~ariaPlaceholder=?,\n    ~ariaReadonly=?,\n    ~ariaRequired=?,\n    ~ariaSelected=?,\n    ~ariaSort=?,\n    ~ariaValuemax=?,\n    ~ariaValuemin=?,\n    ~ariaValuenow=?,\n    ~ariaValuetext=?,\n    ~ariaAtomic=?,\n    ~ariaBusy=?,\n    ~ariaRelevant=?,\n    ~ariaGrabbed=?,\n    ~ariaActivedescendant=?,\n    ~ariaColcount=?,\n    ~ariaColindex=?,\n    ~ariaColspan=?,\n    ~ariaControls=?,\n    ~ariaDescribedby=?,\n    ~ariaErrormessage=?,\n    ~ariaFlowto=?,\n    ~ariaLabelledby=?,\n    ~ariaOwns=?,\n    ~ariaPosinset=?,\n    ~ariaRowcount=?,\n    ~ariaRowindex=?,\n    ~ariaRowspan=?,\n    ~ariaSetsize=?,\n    ~defaultChecked=?,\n    ~defaultValue=?,\n    ~accessKey=?,\n    ~contentEditable=?,\n    ~contextMenu=?,\n    ~lang=?,\n    ~role=?,\n    ~style=?,\n    ~spellCheck=?,\n    ~tabIndex=?,\n    ~title=?,\n    ~itemID=?,\n    ~itemProp=?,\n    ~itemRef=?,\n    ~itemScope=?,\n    ~itemType=?,\n    ~accept=?,\n    ~acceptCharset=?,\n    ~action=?,\n    ~allowFullScreen=?,\n    ~async=?,\n    ~autoComplete=?,\n    ~autoCapitalize=?,\n    ~autoFocus=?,\n    ~autoPlay=?,\n    ~challenge=?,\n    ~charSet=?,\n    ~checked=?,\n    ~cite=?,\n    ~crossOrigin=?,\n    ~cols=?,\n    ~colSpan=?,\n    ~content=?,\n    ~controls=?,\n    ~coords=?,\n    ~data=?,\n    ~dateTime=?,\n    ~default=?,\n    ~defer=?,\n    ~disabled=?,\n    ~download=?,\n    ~encType=?,\n    ~form=?,\n    ~formAction=?,\n    ~formTarget=?,\n    ~formMethod=?,\n    ~headers=?,\n    ~high=?,\n    ~href=?,\n    ~hrefLang=?,\n    ~htmlFor=?,\n    ~httpEquiv=?,\n    ~icon=?,\n    ~inputMode=?,\n    ~integrity=?,\n    ~keyType=?,\n    ~kind=?,\n    ~label=?,\n    ~list=?,\n    ~loop=?,\n    ~low=?,\n    ~manifest=?,\n    ~max=?,\n    ~maxLength=?,\n    ~media=?,\n    ~mediaGroup=?,\n    ~method=?,\n    ~min=?,\n    ~minLength=?,\n    ~multiple=?,\n    ~muted=?,\n    ~name=?,\n    ~nonce=?,\n    ~noValidate=?,\n    ~open_=?,\n    ~optimum=?,\n    ~pattern=?,\n    ~placeholder=?,\n    ~playsInline=?,\n    ~poster=?,\n    ~preload=?,\n    ~radioGroup=?,\n    ~readOnly=?,\n    ~rel=?,\n    ~required=?,\n    ~reversed=?,\n    ~rows=?,\n    ~rowSpan=?,\n    ~sandbox=?,\n    ~scope=?,\n    ~scoped=?,\n    ~scrolling=?,\n    ~selected=?,\n    ~shape=?,\n    ~size=?,\n    ~sizes=?,\n    ~span=?,\n    ~srcDoc=?,\n    ~srcLang=?,\n    ~srcSet=?,\n    ~start=?,\n    ~step=?,\n    ~summary=?,\n    ~target=?,\n    ~type_=?,\n    ~useMap=?,\n    ~value=?,\n    ~wrap=?,\n    ~onCopy=?,\n    ~onCut=?,\n    ~onPaste=?,\n    ~onCompositionEnd=?,\n    ~onCompositionStart=?,\n    ~onCompositionUpdate=?,\n    ~onKeyDown=?,\n    ~onKeyPress=?,\n    ~onKeyUp=?,\n    ~onFocus=?,\n    ~onBlur=?,\n    ~onInput=?,\n    ~onInvalid=?,\n    ~onContextMenu=?,\n    ~onDoubleClick=?,\n    ~onDrag=?,\n    ~onDragEnd=?,\n    ~onDragEnter=?,\n    ~onDragExit=?,\n    ~onDragLeave=?,\n    ~onDragOver=?,\n    ~onDragStart=?,\n    ~onDrop=?,\n    ~onMouseDown=?,\n    ~onMouseEnter=?,\n    ~onMouseLeave=?,\n    ~onMouseMove=?,\n    ~onMouseOut=?,\n    ~onMouseOver=?,\n    ~onMouseUp=?,\n    ~onSelect=?,\n    ~onTouchCancel=?,\n    ~onTouchEnd=?,\n    ~onTouchMove=?,\n    ~onTouchStart=?,\n    ~onPointerOver=?,\n    ~onPointerEnter=?,\n    ~onPointerDown=?,\n    ~onPointerMove=?,\n    ~onPointerUp=?,\n    ~onPointerCancel=?,\n    ~onPointerOut=?,\n    ~onPointerLeave=?,\n    ~onGotPointerCapture=?,\n    ~onLostPointerCapture=?,\n    ~onScroll=?,\n    ~onWheel=?,\n    ~onAbort=?,\n    ~onCanPlay=?,\n    ~onCanPlayThrough=?,\n    ~onDurationChange=?,\n    ~onEmptied=?,\n    ~onEnded=?,\n    ~onError=?,\n    ~onLoadedData=?,\n    ~onLoadedMetadata=?,\n    ~onLoadStart=?,\n    ~onPause=?,\n    ~onPlay=?,\n    ~onPlaying=?,\n    ~onProgress=?,\n    ~onRateChange=?,\n    ~onSeeked=?,\n    ~onSeeking=?,\n    ~onStalled=?,\n    ~onSuspend=?,\n    ~onTimeUpdate=?,\n    ~onVolumeChange=?,\n    ~onWaiting=?,\n    ~onLoad=?,\n    ~onAnimationStart=?,\n    ~onAnimationEnd=?,\n    ~onAnimationIteration=?,\n    ~onTransitionEnd=?,\n  ) => {\n    <Base\n      className={`${LocalStyles.createStack(~direction?, ())} ${className}`}\n      // forward:start\n      ?borderRadius\n      ?borderTLRadius\n      ?borderTRRadius\n      ?borderBLRadius\n      ?borderBRRadius\n      ?borderStyle\n      ?borderColor\n      ?borderWidth\n      ?borderRightStyle\n      ?borderLeftStyle\n      ?borderTopStyle\n      ?borderBottomStyle\n      ?borderRightColor\n      ?borderLeftColor\n      ?borderTopColor\n      ?borderBottomColor\n      ?borderRightWidth\n      ?borderLeftWidth\n      ?borderTopWidth\n      ?borderBottomWidth\n      ?border\n      ?borderRight\n      ?borderLeft\n      ?borderTop\n      ?borderBottom\n      ?bgColor\n      ?bgSize\n      ?bgPosition\n      ?bgImage\n      ?color\n      ?display\n      ?justifyContent\n      ?flexDirection\n      ?alignItems\n      ?flexBasis\n      ?flexWrap\n      ?flexGrow\n      ?alignContent\n      ?alignSelf\n      ?justifySelf\n      ?gap\n      ?p\n      ?px\n      ?py\n      ?pt\n      ?pb\n      ?pl\n      ?pr\n      ?m\n      ?mx\n      ?my\n      ?mt\n      ?mb\n      ?ml\n      ?mr\n      ?textAlign\n      ?fontFamily\n      ?fontWeight\n      ?fontSize\n      ?letterSpacing\n      ?lineHeight\n      ?width\n      ?height\n      ?minW\n      ?minH\n      ?maxW\n      ?maxH\n      ?position\n      ?top\n      ?bottom\n      ?left\n      ?right\n      ?zIndex\n      ?boxSizing\n      ?overflow\n      ?overflowX\n      ?overflowY\n      ?cursor\n      ?visibility\n      ?listStyleType\n      ?listStylePosition\n      ?listStyleImage\n      ?listStyle\n      ?outlineStyle\n      ?outline\n      ?textDecorationStyle\n      ?textDecorationLine\n      ?textDecoration\n      ?transform\n      ?_focus\n      ?_hover\n      ?_active\n      ?_focusWithin\n      ?_focusVisible\n      ?_disabled\n      ?_before\n      ?_after\n      ?_even\n      ?_odd\n      ?_first\n      ?_last\n      ?_notFirst\n      ?_notLast\n      ?transition\n      ?transitionProperty\n      ?transitionDelay\n      ?transitionDuration\n      ?transitionTimingFunction\n      ?transitions\n      // forward:end\n      // DOM Props\n      tag\n      ?id\n      ?onSubmit\n      ?onClick\n      ?onChange\n      ?dangerouslySetInnerHTML\n      ?src\n      ?alt\n      ?innerRef\n      ?ariaDetails\n      ?ariaDisabled\n      ?ariaHidden\n      ?ariaKeyshortcuts\n      ?ariaLabel\n      ?ariaRoledescription\n      ?ariaExpanded\n      ?ariaLevel\n      ?ariaModal\n      ?ariaMultiline\n      ?ariaMultiselectable\n      ?ariaPlaceholder\n      ?ariaReadonly\n      ?ariaRequired\n      ?ariaSelected\n      ?ariaSort\n      ?ariaValuemax\n      ?ariaValuemin\n      ?ariaValuenow\n      ?ariaValuetext\n      ?ariaAtomic\n      ?ariaBusy\n      ?ariaRelevant\n      ?ariaGrabbed\n      ?ariaActivedescendant\n      ?ariaColcount\n      ?ariaColindex\n      ?ariaColspan\n      ?ariaControls\n      ?ariaDescribedby\n      ?ariaErrormessage\n      ?ariaFlowto\n      ?ariaLabelledby\n      ?ariaOwns\n      ?ariaPosinset\n      ?ariaRowcount\n      ?ariaRowindex\n      ?ariaRowspan\n      ?ariaSetsize\n      ?defaultChecked\n      ?defaultValue\n      ?accessKey\n      ?contentEditable\n      ?contextMenu\n      ?lang\n      ?role\n      ?style\n      ?spellCheck\n      ?tabIndex\n      ?title\n      ?itemID\n      ?itemProp\n      ?itemRef\n      ?itemScope\n      ?itemType\n      ?accept\n      ?acceptCharset\n      ?action\n      ?allowFullScreen\n      ?async\n      ?autoComplete\n      ?autoCapitalize\n      ?autoFocus\n      ?autoPlay\n      ?challenge\n      ?charSet\n      ?checked\n      ?cite\n      ?crossOrigin\n      ?cols\n      ?colSpan\n      ?content\n      ?controls\n      ?coords\n      ?data\n      ?dateTime\n      ?default\n      ?defer\n      ?disabled\n      ?download\n      ?encType\n      ?form\n      ?formAction\n      ?formTarget\n      ?formMethod\n      ?headers\n      ?high\n      ?href\n      ?hrefLang\n      ?htmlFor\n      ?httpEquiv\n      ?icon\n      ?inputMode\n      ?integrity\n      ?keyType\n      ?kind\n      ?label\n      ?list\n      ?loop\n      ?low\n      ?manifest\n      ?max\n      ?maxLength\n      ?media\n      ?mediaGroup\n      ?method\n      ?min\n      ?minLength\n      ?multiple\n      ?muted\n      ?name\n      ?nonce\n      ?noValidate\n      ?open_\n      ?optimum\n      ?pattern\n      ?placeholder\n      ?playsInline\n      ?poster\n      ?preload\n      ?radioGroup\n      ?readOnly\n      ?rel\n      ?required\n      ?reversed\n      ?rows\n      ?rowSpan\n      ?sandbox\n      ?scope\n      ?scoped\n      ?scrolling\n      ?selected\n      ?shape\n      ?size\n      ?sizes\n      ?span\n      ?srcDoc\n      ?srcLang\n      ?srcSet\n      ?start\n      ?step\n      ?summary\n      ?target\n      ?type_\n      ?useMap\n      ?value\n      ?wrap\n      ?onCopy\n      ?onCut\n      ?onPaste\n      ?onCompositionEnd\n      ?onCompositionStart\n      ?onCompositionUpdate\n      ?onKeyDown\n      ?onKeyPress\n      ?onKeyUp\n      ?onFocus\n      ?onBlur\n      ?onInput\n      ?onInvalid\n      ?onContextMenu\n      ?onDoubleClick\n      ?onDrag\n      ?onDragEnd\n      ?onDragEnter\n      ?onDragExit\n      ?onDragLeave\n      ?onDragOver\n      ?onDragStart\n      ?onDrop\n      ?onMouseDown\n      ?onMouseEnter\n      ?onMouseLeave\n      ?onMouseMove\n      ?onMouseOut\n      ?onMouseOver\n      ?onMouseUp\n      ?onSelect\n      ?onTouchCancel\n      ?onTouchEnd\n      ?onTouchMove\n      ?onTouchStart\n      ?onPointerOver\n      ?onPointerEnter\n      ?onPointerDown\n      ?onPointerMove\n      ?onPointerUp\n      ?onPointerCancel\n      ?onPointerOut\n      ?onPointerLeave\n      ?onGotPointerCapture\n      ?onLostPointerCapture\n      ?onScroll\n      ?onWheel\n      ?onAbort\n      ?onCanPlay\n      ?onCanPlayThrough\n      ?onDurationChange\n      ?onEmptied\n      ?onEnded\n      ?onError\n      ?onLoadedData\n      ?onLoadedMetadata\n      ?onLoadStart\n      ?onPause\n      ?onPlay\n      ?onPlaying\n      ?onProgress\n      ?onRateChange\n      ?onSeeked\n      ?onSeeking\n      ?onStalled\n      ?onSuspend\n      ?onTimeUpdate\n      ?onVolumeChange\n      ?onWaiting\n      ?onLoad\n      ?onAnimationStart\n      ?onAnimationEnd\n      ?onAnimationIteration\n      ?onTransitionEnd>\n      {switch (children, divider) {\n      | (None, None) => React.null\n      | (Some(children), None) => children\n      | (None, Some(divider)) => divider\n      | (Some(children), Some(divider)) => renderWithDivider(children, divider)\n      }}\n    </Base>\n  }\n}\n"
  },
  {
    "path": "packages/core/src/components/stack/Ancestor_Stack_Stories.res",
    "content": "open Ancestor\nopen Ancestor_Helpers\n\nlet default = Storybook.story(~title=\"Components/Stack\", ())\n\nlet \\\"BasicUsage\" = () => {\n  <Stack\n    maxW={xs: 32.0->#rem}\n    p={xs: 2}\n    borderRadius={xs: 1}\n    border={xs: (2->#px, #solid, Colors.gray1)}\n    direction={xs: #horizontal}\n    gap={xs: 2, md: 4}>\n    <Placeholder width={xs: 100.0->#percent} />\n    <Placeholder width={xs: 100.0->#percent} />\n    <Placeholder width={xs: 100.0->#percent} />\n  </Stack>\n}\n\nlet \\\"WithDivider\" = () => {\n  <Stack\n    p={xs: 2}\n    borderRadius={xs: 1}\n    alignItems={md: #center}\n    border={xs: (1->#px, #solid, Colors.gray1)}\n    divider={<Base height={xs: 2->#px} width={md: 2.4->#rem} bgColor={xs: #hex(\"#000\")} />}\n    direction={xs: #horizontal, md: #vertical}\n    gap={xs: 2, md: 4}>\n    <Placeholder width={xs: 100.0->#percent, md: 7.2->#rem} />\n    <Placeholder width={xs: 100.0->#percent, md: 7.2->#rem} />\n    <Placeholder width={xs: 100.0->#percent, md: 7.2->#rem} />\n  </Stack>\n}\n"
  },
  {
    "path": "packages/core/src/core/Ancestor_Config.res",
    "content": "/*\n * NOTE: The breakpoint module used to create the custom breakpoints API.\n */\nmodule type Breakpoints = {\n  type breakpoints<'value>\n  type keyOfBreakpoints\n  let encode: breakpoints<'value> => array<(keyOfBreakpoints, option<'value>)>\n  let sizeByBreakpoints: keyOfBreakpoints => int\n}\n\nmodule type T = {\n  type breakpoints<'value>\n  type keyOfBreakpoints\n  type spacing\n  type radius\n  type colors\n  type zIndex\n  type fontFamily\n  type fontSize\n  type fontWeight\n  type lineHeight\n  type letterSpacing\n  type textShadow\n  type boxShadow\n\n  let encode: breakpoints<'value> => array<(keyOfBreakpoints, option<'value>)>\n  let zIndex: zIndex => int\n  let colors: colors => AncestorCss_WrappedTypes.Color.t\n  let spacing: spacing => Css_AtomicTypes.Length.t\n  let radius: radius => Css_AtomicTypes.Length.t\n  let sizeByBreakpoints: keyOfBreakpoints => int\n  let fontFamily: fontFamily => AncestorCss_WrappedTypes.FontFamily.t\n  let fontSize: fontSize => Css_AtomicTypes.Length.t\n  let fontWeight: fontWeight => Css_AtomicTypes.FontWeight.t\n  let lineHeight: lineHeight => AncestorCss_WrappedTypes.LineHeight.t\n  let letterSpacing: letterSpacing => Css_AtomicTypes.Length.t\n  let textShadow: textShadow => AncestorCss_WrappedTypes.TextShadow.t\n  let boxShadow: boxShadow => AncestorCss_WrappedTypes.BoxShadow.t\n}\n"
  },
  {
    "path": "packages/core/src/core/Ancestor_Core.res",
    "content": "module Make = (\n  BreakpointsConfig: Ancestor_Config.Breakpoints,\n  ColorsConfig: AncestorCss_Config.Colors,\n  SpacingConfig: AncestorCss_Config.Spacing,\n  RadiusConfig: AncestorCss_Config.Radius,\n  ZIndexConfig: AncestorCss_Config.ZIndex,\n  TypographyConfig: AncestorCss_Config.Typography,\n  ShadowsConfig: AncestorCss_Config.Shadows,\n) => {\n  module Config__Internal = {\n    include BreakpointsConfig\n    include ColorsConfig\n    include SpacingConfig\n    include RadiusConfig\n    include ZIndexConfig\n    include TypographyConfig\n    include ShadowsConfig\n  }\n\n  module Styles = Ancestor_Styles.Make(Config__Internal)\n  /**\n   * Components\n   */\n  module Base = Ancestor_Base.Make(Config__Internal)\n  module Box = Ancestor_Box.Make(Config__Internal)\n  module Grid = Ancestor_Grid.Make(Config__Internal)\n  module Hidden = Ancestor_Hidden.Make(Config__Internal)\n  module Stack = Ancestor_Stack.Make(Config__Internal)\n  module Typography = Base\n  module Css = Styles.Css\n  module ResponsiveValueHook = Ancestor_ResponsiveValueHook.Make(Config__Internal)\n\n  /**\n   * Exposing Ancestor hooks\n   */\n  let {useResponsiveValue} = module(ResponsiveValueHook)\n}\n"
  },
  {
    "path": "packages/core/src/core/Ancestor_Styles.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Css = AncestorCss.Make(\n    {\n      type breakpoints = Config.keyOfBreakpoints\n      let sizeByBreakpoints = Config.sizeByBreakpoints\n    },\n    {\n      type colors = Config.colors\n      let colors = Config.colors\n    },\n    {\n      type spacing = Config.spacing\n      let spacing = Config.spacing\n    },\n    {\n      type radius = Config.radius\n      let radius = Config.radius\n    },\n    {\n      type zIndex = Config.zIndex\n      let zIndex = Config.zIndex\n    },\n    {\n      type fontFamily = Config.fontFamily\n      type fontSize = Config.fontSize\n      type fontWeight = Config.fontWeight\n      type lineHeight = Config.lineHeight\n      type letterSpacing = Config.letterSpacing\n      let fontFamily = Config.fontFamily\n      let fontSize = Config.fontSize\n      let fontWeight = Config.fontWeight\n      let lineHeight = Config.lineHeight\n      let letterSpacing = Config.letterSpacing\n    },\n    {\n      type boxShadow = Config.boxShadow\n      type textShadow = Config.textShadow\n      let boxShadow = Config.boxShadow\n      let textShadow = Config.textShadow\n    },\n  )\n\n  let filterEmptyValues = values =>\n    values->Js.Array2.reduce((values, (breakpointName, breakpointValue)) => {\n      switch breakpointValue {\n      | None => values\n      | Some(breakpointValue) => values->Js.Array2.concat([(breakpointName, breakpointValue)])\n      }\n    }, [])\n\n  let sortBySize = ((first, _), (second, _)) => {\n    Config.sizeByBreakpoints(first) - Config.sizeByBreakpoints(second)\n  }\n\n  let createResponsiveProp = (~prop, ~defaultStyles=[], transform) => {\n    switch prop {\n    | None => defaultStyles\n    | Some(values) =>\n      values\n      ->Config.encode\n      ->filterEmptyValues\n      ->Js.Array2.sortInPlaceWith(sortBySize)\n      ->Js.Array2.reduce(\n        (currentStyles, (breakpoint, value)) =>\n          currentStyles->Js.Array2.concat([Css.breakpoint(breakpoint, transform(value))]),\n        [],\n      )\n    }\n  }\n\n  module RulesCmp = Belt.Id.MakeComparable({\n    type t = Config.keyOfBreakpoints\n    let cmp = (a, b) => Pervasives.compare(a, b)\n  })\n\n  let groupRulesByBreakpoint = (transformValue, mapper, (breakpoint, maybeValue)) =>\n    maybeValue\n    ->Belt.Option.map(transformValue)\n    ->Belt.Option.map(v => [v])\n    ->Belt.Option.map(rules =>\n      switch mapper->Belt.Map.get(breakpoint) {\n      | None => mapper->Belt.Map.set(breakpoint, rules)\n      | Some(existingRules) => {\n          let updatedRules = existingRules->Js.Array2.concat(rules)\n          mapper->Belt.Map.set(breakpoint, updatedRules)\n        }\n      }\n    )\n    ->Belt.Option.getWithDefault(mapper)\n\n  let addRule = (mapper, transformValue, maybeValues) =>\n    maybeValues\n    ->Belt.Option.map(Config.encode)\n    ->Belt.Option.map(values =>\n      values->Js.Array2.reduce(groupRulesByBreakpoint(transformValue), mapper)\n    )\n    ->Belt.Option.getWithDefault(mapper)\n\n  let mergeRulesByBreakpoint = values => values->Js.Array2.reduce((styles, (breakpoint, rules)) =>\n      switch rules {\n      | None => styles\n      | Some(rules) => {\n          let breakpointStyles = Css.breakpoint(breakpoint, rules)\n          styles->Js.Array2.concat([breakpointStyles])\n        }\n      }\n    , [])\n\n  let createSelector = (selectorValue, maybeValues) =>\n    maybeValues\n    ->Belt.Option.map(Config.encode)\n    ->Belt.Option.map(mergeRulesByBreakpoint)\n    ->Belt.Option.map(values => Css.selector(. selectorValue, values))\n\n  let createPseudoSelector = (selector, maybeValues) =>\n    maybeValues\n    ->Belt.Option.map(Config.encode)\n    ->Belt.Option.map(mergeRulesByBreakpoint)\n    ->Belt.Option.map(selector)\n\n  let removeOptionals = items => items->Js.Array2.reduce((acc, current) =>\n      switch current {\n      | None => acc\n      | Some(item) => acc->Js.Array2.concat([item])\n      }\n    , [])\n\n  let createResponsiveStyles = (\n    ~borderRadius=?,\n    ~borderTLRadius=?,\n    ~borderTRRadius=?,\n    ~borderBLRadius=?,\n    ~borderBRRadius=?,\n    ~borderStyle=?,\n    ~borderColor=?,\n    ~borderWidth=?,\n    ~borderRightStyle=?,\n    ~borderLeftStyle=?,\n    ~borderTopStyle=?,\n    ~borderBottomStyle=?,\n    ~borderRightColor=?,\n    ~borderLeftColor=?,\n    ~borderTopColor=?,\n    ~borderBottomColor=?,\n    ~borderRightWidth=?,\n    ~borderLeftWidth=?,\n    ~borderTopWidth=?,\n    ~borderBottomWidth=?,\n    ~border=?,\n    ~borderRight=?,\n    ~borderLeft=?,\n    ~borderTop=?,\n    ~borderBottom=?,\n    ~bgColor=?,\n    ~bgSize=?,\n    ~bgPosition=?,\n    ~bgImage=?,\n    ~color=?,\n    ~display=?,\n    ~justifyContent=?,\n    ~flexDirection=?,\n    ~alignItems=?,\n    ~flexBasis=?,\n    ~flexWrap=?,\n    ~flexGrow=?,\n    ~alignContent=?,\n    ~alignSelf=?,\n    ~justifySelf=?,\n    ~gap=?,\n    ~p=?,\n    ~py=?,\n    ~px=?,\n    ~pt=?,\n    ~pb=?,\n    ~pl=?,\n    ~pr=?,\n    ~m=?,\n    ~mx=?,\n    ~my=?,\n    ~mt=?,\n    ~mb=?,\n    ~ml=?,\n    ~mr=?,\n    ~textAlign=?,\n    ~fontFamily=?,\n    ~fontWeight=?,\n    ~fontSize=?,\n    ~letterSpacing=?,\n    ~lineHeight=?,\n    ~width=?,\n    ~height=?,\n    ~minW=?,\n    ~minH=?,\n    ~maxW=?,\n    ~maxH=?,\n    ~position=?,\n    ~top=?,\n    ~bottom=?,\n    ~left=?,\n    ~right=?,\n    ~zIndex=?,\n    ~boxSizing=?,\n    ~overflow=?,\n    ~overflowX=?,\n    ~overflowY=?,\n    ~cursor=?,\n    ~visibility=?,\n    ~listStyleType=?,\n    ~listStylePosition=?,\n    ~listStyleImage=?,\n    ~listStyle=?,\n    ~outlineStyle=?,\n    ~outline=?,\n    ~textDecorationStyle=?,\n    ~textDecorationLine=?,\n    ~textDecoration=?,\n    ~transform=?,\n    // Support for transition\n    ~transition=?,\n    ~transitionProperty=?,\n    ~transitionDelay=?,\n    ~transitionDuration=?,\n    ~transitionTimingFunction=?,\n    ~transitions=?,\n    // Support for pseudo\n    ~_hover=?,\n    ~_focus=?,\n    ~_active=?,\n    ~_focusWithin=?,\n    ~_focusVisible=?,\n    ~_disabled=?,\n    ~_before=?,\n    ~_after=?,\n    ~_even=?,\n    ~_odd=?,\n    ~_first=?,\n    ~_last=?,\n    ~_notFirst=?,\n    ~_notLast=?,\n    (),\n  ) => {\n    let ps = createPseudoSelector\n    let cs = createSelector\n\n    let rules =\n      Belt.Map.make(~id=module(RulesCmp))\n      ->addRule(Css.color, color)\n      ->addRule(Css.backgroundColor, bgColor)\n      // Margin\n      ->addRule(Css.margin, m)\n      ->addRule(Css.marginBottom, my)\n      ->addRule(Css.marginTop, my)\n      ->addRule(Css.marginRight, mx)\n      ->addRule(Css.marginLeft, mx)\n      ->addRule(Css.marginTop, mt)\n      ->addRule(Css.marginBottom, mb)\n      ->addRule(Css.marginRight, mr)\n      ->addRule(Css.marginLeft, ml)\n      // Padding\n      ->addRule(Css.padding, p)\n      ->addRule(Css.paddingBottom, py)\n      ->addRule(Css.paddingTop, py)\n      ->addRule(Css.paddingRight, px)\n      ->addRule(Css.paddingLeft, px)\n      ->addRule(Css.paddingTop, pt)\n      ->addRule(Css.paddingBottom, pb)\n      ->addRule(Css.paddingRight, pr)\n      ->addRule(Css.paddingLeft, pl)\n      ->addRule(Css.zIndex, zIndex)\n      // Border Radius\n      ->addRule(Css.borderRadius, borderRadius)\n      ->addRule(Css.borderTopLeftRadius, borderTLRadius)\n      ->addRule(Css.borderTopRightRadius, borderTRRadius)\n      ->addRule(Css.borderBottomLeftRadius, borderBLRadius)\n      ->addRule(Css.borderBottomRightRadius, borderBRRadius)\n      // Border\n      ->addRule(Css.borderStyle, borderStyle)\n      ->addRule(Css.borderColor, borderColor)\n      ->addRule(Css.borderWidth, borderWidth)\n      ->addRule(Css.borderRightStyle, borderRightStyle)\n      ->addRule(Css.borderLeftStyle, borderLeftStyle)\n      ->addRule(Css.borderTopStyle, borderTopStyle)\n      ->addRule(Css.borderBottomStyle, borderBottomStyle)\n      ->addRule(Css.borderRightColor, borderRightColor)\n      ->addRule(Css.borderLeftColor, borderLeftColor)\n      ->addRule(Css.borderTopColor, borderTopColor)\n      ->addRule(Css.borderBottomColor, borderBottomColor)\n      ->addRule(Css.borderRightWidth, borderRightWidth)\n      ->addRule(Css.borderLeftWidth, borderLeftWidth)\n      ->addRule(Css.borderTopWidth, borderTopWidth)\n      ->addRule(Css.borderBottomWidth, borderBottomWidth)\n      ->addRule(((size, style, color)) => Css.border(size, style, color), border)\n      ->addRule(((size, style, color)) => Css.borderRight(size, style, color), borderRight)\n      ->addRule(((size, style, color)) => Css.borderLeft(size, style, color), borderLeft)\n      ->addRule(((size, style, color)) => Css.borderTop(size, style, color), borderTop)\n      ->addRule(((size, style, color)) => Css.borderBottom(size, style, color), borderBottom)\n      ->addRule(Css.backgroundSize, bgSize)\n      ->addRule(Css.backgroundPosition, bgPosition)\n      ->addRule(Css.backgroundImage, bgImage)\n      // Flex\n      ->addRule(Css.display, display)\n      ->addRule(Css.justifyContent, justifyContent)\n      ->addRule(Css.flexDirection, flexDirection)\n      ->addRule(Css.alignItems, alignItems)\n      ->addRule(Css.flexBasis, flexBasis)\n      ->addRule(Css.flexWrap, flexWrap)\n      ->addRule(Css.flexGrow, flexGrow)\n      ->addRule(Css.alignContent, alignContent)\n      ->addRule(Css.alignSelf, alignSelf)\n      ->addRule(Css.justifySelf, justifySelf)\n      ->addRule(Css.gap, gap)\n      // Others\n      ->addRule(Css.textAlign, textAlign)\n      ->addRule(Css.fontFamily, fontFamily)\n      ->addRule(Css.fontWeight, fontWeight)\n      ->addRule(Css.fontSize, fontSize)\n      ->addRule(Css.letterSpacing, letterSpacing)\n      ->addRule(Css.lineHeight, lineHeight)\n      ->addRule(Css.width, width)\n      ->addRule(Css.height, height)\n      ->addRule(Css.minWidth, minW)\n      ->addRule(Css.minHeight, minH)\n      ->addRule(Css.maxWidth, maxW)\n      ->addRule(Css.maxHeight, maxH)\n      ->addRule(Css.position, position)\n      ->addRule(Css.top, top)\n      ->addRule(Css.bottom, bottom)\n      ->addRule(Css.left, left)\n      ->addRule(Css.right, right)\n      ->addRule(Css.boxSizing, boxSizing)\n      ->addRule(Css.overflow, overflow)\n      ->addRule(Css.overflowX, overflowX)\n      ->addRule(Css.overflowY, overflowY)\n      ->addRule(Css.cursor, cursor)\n      ->addRule(Css.visibility, visibility)\n      ->addRule(Css.listStyleType, listStyleType)\n      ->addRule(Css.listStylePosition, listStylePosition)\n      ->addRule(Css.listStyleImage, listStyleImage)\n      ->addRule(((type_, position, image)) => Css.listStyle(type_, position, image), listStyle)\n      ->addRule(Css.outlineStyle, outlineStyle)\n      ->addRule(((size, style, color)) => Css.outline(size, style, color), outline)\n      ->addRule(Css.textDecorationStyle, textDecorationStyle)\n      ->addRule(Css.textDecorationLine, textDecorationLine)\n      ->addRule(Css.textDecoration, textDecoration)\n      ->addRule(Css.transform, transform)\n      ->addRule(Css.transitionValue, transition)\n      ->addRule(Css.transitionProperty, transitionProperty)\n      ->addRule(Css.transitionDelay, transitionDelay)\n      ->addRule(Css.transitionDuration, transitionDuration)\n      ->addRule(Css.transitionTimingFunction, transitionTimingFunction)\n      ->addRule(Css.transitions, transitions)\n\n    let pseudoSelectorsRules =\n      [\n        ps(Css.hover, _hover),\n        ps(Css.hover, _hover),\n        ps(Css.focus, _focus),\n        ps(Css.active, _active),\n        ps(Css.focusWithin, _focusWithin),\n        ps(Css.focusVisible, _focusVisible),\n        ps(Css.disabled, _disabled),\n        ps(Css.before, _before),\n        ps(Css.after, _after),\n        ps(Css.first, _first),\n        cs(\"&:nth-of-type(even)\", _even),\n        cs(\"&:nth-of-type(odd)\", _odd),\n        cs(\"&:last-of-type\", _last),\n        cs(\"&:not(:first-of-type)\", _notFirst),\n        cs(\"&:not(:last-of-type)\", _notLast),\n      ]->removeOptionals\n\n    let parsedRules =\n      rules\n      ->Belt.Map.toArray\n      ->Js.Array2.sortInPlaceWith(sortBySize)\n      ->Js.Array2.map(((breakpoint, rules)) => Css.breakpoint(breakpoint, rules))\n      ->Js.Array2.concat(pseudoSelectorsRules)\n\n    Css.style(. parsedRules)\n  }\n}\n"
  },
  {
    "path": "packages/core/src/hooks/Ancestor_ResponsiveValueHook.res",
    "content": "module Make = (Config: Ancestor_Config.T) => {\n  module Styles = Ancestor_Styles.Make(Config)\n\n  @val @scope(\"globalThis\") external window: option<Dom.window> = \"window\"\n  @get external innerWidth: Dom.window => float = \"innerWidth\"\n  @send external addEventListener: (Dom.window, string, unit => unit) => unit = \"addEventListener\"\n  @send\n  external removeEventListener: (Dom.window, string, unit => unit) => unit = \"removeEventListener\"\n\n  let initialWidth = window->Belt.Option.map(w => w->innerWidth)\n\n  let getBreakpointValue = (innerWidth, values: Config.breakpoints<'a>) =>\n    values\n    ->Config.encode\n    ->Styles.filterEmptyValues\n    ->Js.Array2.reduce((acc, (breakpoint, value)) => {\n      let breakpoint = breakpoint->Config.sizeByBreakpoints\n      if innerWidth >= breakpoint->Js.Int.toFloat {\n        Some(value)\n      } else {\n        acc\n      }\n    }, None)\n\n  let useResponsiveValue = (default, values) => {\n    let (width, setWidth) = React.useState(_ => initialWidth)\n\n    React.useEffect0(() => {\n      let updateWidth = () => setWidth(_ => window->Belt.Option.map(w => w->innerWidth))\n\n      window->Belt.Option.map(w => w->addEventListener(\"resize\", updateWidth))->ignore\n\n      Some(\n        () => window->Belt.Option.map(w => w->removeEventListener(\"resize\", updateWidth))->ignore,\n      )\n    })\n\n    width\n    ->Belt.Option.flatMap(width => getBreakpointValue(width, values))\n    ->Belt.Option.getWithDefault(default)\n  }\n}\n"
  },
  {
    "path": "packages/core/src/hooks/Ancestor_ResponsiveValueHook_Stories.res",
    "content": "let default = Storybook.story(~title=\"Hooks/useResponsiveValue\", ~excludeStories=[\"Card\"], ())\n\nopen Ancestor\n\nmodule Card = {\n  @react.component\n  let make = (~color, ~label) =>\n    <Box p={xs: 3} fontSize={xs: 24->#px} color={xs: \"#fafafa\"->#hex} bgColor={xs: color}>\n      {label->React.string}\n    </Box>\n}\n\nlet basicUsage = () => {\n  let color = Ancestor.useResponsiveValue(\"000\"->#hex, {xs: \"000\"->#hex, md: \"716e6e\"->#hex})\n  let label = Ancestor.useResponsiveValue(\n    \"Default\",\n    {xs: \"Mobile\", sm: \"Small\", md: \"Tablet\", lg: \"Large\", xl: \"Extra Large\"},\n  )\n\n  <Box>\n    <Card color label />\n  </Box>\n}\n"
  },
  {
    "path": "packages/css/.npmignore",
    "content": "*_Stories.res\n*_Test.res\n__tests__/\nsrc/_helpers_/\n**/__snapshots__/\n.storybook\n"
  },
  {
    "path": "packages/css/.storybook/main.js",
    "content": "module.exports = {\n  stories: [\"../src/**/*_Stories.bs.js\"],\n  addons: [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\",\n  ],\n  framework: \"@storybook/react\",\n};\n"
  },
  {
    "path": "packages/css/.storybook/preview-head.html",
    "content": "<style>\n  * {\n    box-sizing: border-box;\n    font-family: \"DM Sans\", sans-serif;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p {\n    margin: 0;\n  }\n  html {\n    font-size: 10px;\n  }\n\n  :root {\n    --cool-shadow: 1px 2px 0 0 #f36;\n  }\n</style>\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap\"\n  rel=\"stylesheet\"\n/>\n"
  },
  {
    "path": "packages/css/.storybook/preview.js",
    "content": "export const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n}"
  },
  {
    "path": "packages/css/__tests__/AncestorCss_Custom.res",
    "content": "include AncestorCss.Make(\n  {\n    type breakpoints = [#xs | #sm]\n    let sizeByBreakpoints = v =>\n      switch v {\n      | #xs => 0\n      | #sm => 470\n      }\n  },\n  {\n    type colors = [#primary | #secondary]\n    let colors = (x: colors) =>\n      switch x {\n      | #primary => #hex(\"fc0\")\n      | #secondary => #hex(\"363636\")\n      }\n  },\n  AncestorCss.Defaults.Spacing,\n  AncestorCss.Defaults.Radius,\n  AncestorCss.Defaults.ZIndex,\n  AncestorCss.Defaults.Typography,\n  AncestorCss.Defaults.Shadows,\n)\n"
  },
  {
    "path": "packages/css/__tests__/AncestorCss_Test.res",
    "content": "open Jest\nopen Expect\nmodule Renderer = ReactTestRenderer\n\ndescribe(\"Tokens\", () => {\n  test(\"should transform spacing tokens correctly\", () => {\n    open AncestorCss_Custom\n    let className = style(. [padding(2), margin(4)])\n\n    expect(Renderer.create(<div className />)->Renderer.toJSON)->toMatchSnapshot\n  })\n  test(\"should transform color tokens correctly\", () => {\n    open AncestorCss_Custom\n    let className = style(. [color(#primary), bgColor(#secondary)])\n\n    expect(Renderer.create(<div className />)->Renderer.toJSON)->toMatchSnapshot\n  })\n})\n"
  },
  {
    "path": "packages/css/__tests__/__snapshots__/AncestorCss_Test.bs.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tokens should transform color tokens correctly 1`] = `\n.emotion-0 {\n  color: #fc0;\n  background-color: #363636;\n}\n\n<div\n  className=\"emotion-0\"\n/>\n`;\n\nexports[`Tokens should transform spacing tokens correctly 1`] = `\n.emotion-0 {\n  padding: 16px;\n  margin: 32px;\n}\n\n<div\n  className=\"emotion-0\"\n/>\n`;\n"
  },
  {
    "path": "packages/css/bsconfig.json",
    "content": "{\n  \"name\": \"@ancestor-ui/css\",\n  \"version\": \"0.0.1\",\n  \"sources\": [\n    {\n      \"dir\": \"__tests__\",\n      \"type\": \"dev\",\n      \"subdirs\": true\n    },\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"commonjs\",\n      \"in-source\": true\n    }\n  ],\n  \"jsx\": { \"version\": 4, \"mode\": \"classic\" },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\n    \"@rescript/react\",\n    \"@ancestor-ui/bindings\",\n    \"bs-css\",\n    \"bs-css-emotion\"\n  ],\n  \"bs-dev-dependencies\": [\n    \"@greenlabs/rescript-jest\",\n    \"@greenlabs/rescript-testing-library\"\n  ],\n  \"ppx-flags\": []\n}\n"
  },
  {
    "path": "packages/css/jest.config.js",
    "content": "module.exports = {\n  testMatch: [\"**/*_Test.bs.js\"],\n  snapshotSerializers: [\"@emotion/jest/serializer\"],\n  testEnvironment: \"jsdom\",\n};\n"
  },
  {
    "path": "packages/css/package.json",
    "content": "{\n  \"name\": \"@ancestor-ui/css\",\n  \"version\": \"0.6.1\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"@babel/core\": \"7.20.5\",\n    \"@emotion/css\": \"11.10.0\",\n    \"@emotion/jest\": \"11.9.3\",\n    \"@greenlabs/rescript-jest\": \"1.0.1\",\n    \"@greenlabs/rescript-testing-library\": \"2.0.1\",\n    \"@rescript/react\": \"0.11.0-rc.3\",\n    \"@storybook/addon-actions\": \"6.5.15\",\n    \"@storybook/addon-essentials\": \"6.5.15\",\n    \"@storybook/addon-interactions\": \"6.5.15\",\n    \"@storybook/addon-links\": \"6.5.15\",\n    \"@storybook/builder-webpack4\": \"6.5.15\",\n    \"@storybook/manager-webpack4\": \"6.5.15\",\n    \"@storybook/react\": \"6.5.15\",\n    \"@storybook/testing-library\": \"0.0.13\",\n    \"babel-loader\": \"8.3.0\",\n    \"jest\": \"29.3.1\",\n    \"jest-environment-jsdom\": \"29.3.1\",\n    \"jsdom\": \"20.0.3\",\n    \"react\": \"18.2.0\",\n    \"react-dom\": \"18.2.0\",\n    \"react-test-renderer\": \"18.2.0\",\n    \"rescript\": \"10.1.0\"\n  },\n  \"peerDependencies\": {\n    \"@rescript/react\": \">=0.11\",\n    \"react\": \">=18\",\n    \"react-dom\": \">=18\",\n    \"rescript\": \">=10\"\n  },\n  \"dependencies\": {\n    \"@ancestor-ui/bindings\": \"0.1.0\",\n    \"bs-css\": \"16.0.0\",\n    \"bs-css-emotion\": \"5.0.0\",\n    \"rescript-webapi\": \"0.7.0\"\n  },\n  \"scripts\": {\n    \"storybook\": \"start-storybook -p 6006\",\n    \"build-storybook\": \"build-storybook\",\n    \"test\": \"jest\"\n  }\n}\n"
  },
  {
    "path": "packages/css/spec.md",
    "content": "## CSS Spec\n\n- [ ] transition\n- [ ] keyframes\n- [ ] animation\n- [ ] box-shadow\n"
  },
  {
    "path": "packages/css/src/AncestorCss.res",
    "content": "/*\n *  NOTE: AncestorCss defaults.\n */\nmodule Defaults = {\n  let identity = v => v\n\n  module Breakpoints = {\n    type breakpoints = [#xs | #sm | #md | #lg | #xl]\n    let sizeByBreakpoints = breakpoint =>\n      switch breakpoint {\n      | #xs => 0\n      | #sm => 475\n      | #md => 920\n      | #lg => 1280\n      | #xl => 1920\n      }\n  }\n\n  module Colors = {\n    type colors = AncestorCss_WrappedTypes.Color.t\n    let colors = identity\n  }\n\n  module Spacing = {\n    type spacing = int\n    let spacing = v => #px(v * 8)\n  }\n\n  module Radius = {\n    type radius = int\n    let radius = v => #px(v * 8)\n  }\n\n  module ZIndex = {\n    type zIndex = int\n    let zIndex = identity\n  }\n\n  module FontSize = {\n    type fontSize = Css_AtomicTypes.Length.t\n    let fontSize = identity\n  }\n\n  module FontFamily = {\n    type fontFamily = AncestorCss_WrappedTypes.FontFamily.t\n    let fontFamily = identity\n  }\n\n  module FontWeight = {\n    type fontWeight = Css_AtomicTypes.FontWeight.t\n    let fontWeight = identity\n  }\n\n  module LineHeight = {\n    type lineHeight = AncestorCss_WrappedTypes.LineHeight.t\n    let lineHeight = identity\n  }\n\n  module LetterSpacing = {\n    type letterSpacing = Css_AtomicTypes.Length.t\n    let letterSpacing = identity\n  }\n\n  module Typography = {\n    include FontSize\n    include FontFamily\n    include FontWeight\n    include LineHeight\n    include LetterSpacing\n  }\n\n  module BoxShadows = {\n    type boxShadow = AncestorCss_WrappedTypes.BoxShadow.t\n    let boxShadow = identity\n  }\n\n  module TextShadows = {\n    type textShadow = AncestorCss_WrappedTypes.TextShadow.t\n    let textShadow = identity\n  }\n\n  module Shadows = {\n    include BoxShadows\n    include TextShadows\n  }\n}\n\nmodule Make = (\n  Breakpoints: AncestorCss_Config.Breakpoints,\n  CustomColors: AncestorCss_Config.Colors,\n  CustomSpacing: AncestorCss_Config.Spacing,\n  CustomRadius: AncestorCss_Config.Radius,\n  CustomZIndex: AncestorCss_Config.ZIndex,\n  CustomTypography: AncestorCss_Config.Typography,\n  CustomShadows: AncestorCss_Config.Shadows,\n) => {\n  include CssJs\n\n  let zIndex = x => Css_Js_Core.zIndex(x->CustomZIndex.zIndex)\n  /*\n   * Colors\n   */\n  let color = x => Css_Js_Core.color(x->CustomColors.colors)\n  let backgroundColor = x => Css_Js_Core.backgroundColor(x->CustomColors.colors)\n\n  let border = (length, style, color) =>\n    Css_Js_Core.border(length, style, color->CustomColors.colors)\n  let borderBottom = (length, style, color) =>\n    Css_Js_Core.borderBottom(length, style, color->CustomColors.colors)\n  let borderTop = (length, style, color) =>\n    Css_Js_Core.borderTop(length, style, color->CustomColors.colors)\n  let borderLeft = (length, style, color) =>\n    Css_Js_Core.borderLeft(length, style, color->CustomColors.colors)\n  let borderRight = (length, style, color) =>\n    Css_Js_Core.borderRight(length, style, color->CustomColors.colors)\n\n  let borderColor = x => Css_Js_Core.borderColor(x->CustomColors.colors)\n  let borderTopColor = x => Css_Js_Core.borderTopColor(x->CustomColors.colors)\n  let borderBottomColor = x => Css_Js_Core.borderBottomColor(x->CustomColors.colors)\n  let borderLeftColor = x => Css_Js_Core.borderLeftColor(x->CustomColors.colors)\n  let borderRightColor = x => Css_Js_Core.borderRightColor(x->CustomColors.colors)\n\n  let textDecorationColor = x => Css_Js_Core.textDecorationColor(x->CustomColors.colors)\n\n  let outline = (size, style, color) => Css_Js_Core.outline(size, style, color->CustomColors.colors)\n  let outlineColor = x => Css_Js_Core.outlineColor(x->CustomColors.colors)\n\n  /*\n   * Radius\n   */\n  let borderRadius = x => Css_Js_Core.borderRadius(x->CustomRadius.radius)\n  let borderTopLeftRadius = x => Css_Js_Core.borderTopLeftRadius(x->CustomRadius.radius)\n  let borderTopRightRadius = x => Css_Js_Core.borderTopRightRadius(x->CustomRadius.radius)\n  let borderBottomLeftRadius = x => Css_Js_Core.borderTopLeftRadius(x->CustomRadius.radius)\n  let borderBottomRightRadius = x => Css_Js_Core.borderTopRightRadius(x->CustomRadius.radius)\n\n  /*\n   * Spacing\n   */\n  let gap = x => x->CustomSpacing.spacing->Css_Js_Core.gap\n  let gap2 = (~rowGap, ~columnGap) =>\n    Css_Js_Core.gap2(\n      ~rowGap=rowGap->CustomSpacing.spacing,\n      ~columnGap=columnGap->CustomSpacing.spacing,\n    )\n  let padding = x => x->CustomSpacing.spacing->Css_Js_Core.padding\n  let padding2 = (~v, ~h) =>\n    Css_Js_Core.padding2(~v=v->CustomSpacing.spacing, ~h=h->CustomSpacing.spacing)\n  let padding3 = (~top, ~h, ~bottom) =>\n    Css_Js_Core.padding3(\n      ~top=top->CustomSpacing.spacing,\n      ~h=h->CustomSpacing.spacing,\n      ~bottom=bottom->CustomSpacing.spacing,\n    )\n  let padding4 = (~top, ~right, ~bottom, ~left) =>\n    Css_Js_Core.padding4(\n      ~top=top->CustomSpacing.spacing,\n      ~right=right->CustomSpacing.spacing,\n      ~bottom=bottom->CustomSpacing.spacing,\n      ~left=left->CustomSpacing.spacing,\n    )\n\n  let paddingBottom = x => x->CustomSpacing.spacing->Css_Js_Core.paddingBottom\n  let paddingLeft = x => x->CustomSpacing.spacing->Css_Js_Core.paddingLeft\n  let paddingTop = x => x->CustomSpacing.spacing->Css_Js_Core.paddingTop\n  let paddingRight = x => x->CustomSpacing.spacing->Css_Js_Core.paddingRight\n\n  let margin = x => x->CustomSpacing.spacing->Css_Js_Core.margin\n  let margin2 = (~v, ~h) =>\n    Css_Js_Core.margin2(~v=v->CustomSpacing.spacing, ~h=h->CustomSpacing.spacing)\n  let margin3 = (~top, ~h, ~bottom) =>\n    Css_Js_Core.margin3(\n      ~top=top->CustomSpacing.spacing,\n      ~h=h->CustomSpacing.spacing,\n      ~bottom=bottom->CustomSpacing.spacing,\n    )\n  let margin4 = (~top, ~right, ~bottom, ~left) =>\n    Css_Js_Core.margin4(\n      ~top=top->CustomSpacing.spacing,\n      ~right=right->CustomSpacing.spacing,\n      ~bottom=bottom->CustomSpacing.spacing,\n      ~left=left->CustomSpacing.spacing,\n    )\n\n  let marginBottom = x => x->CustomSpacing.spacing->Css_Js_Core.marginBottom\n  let marginLeft = x => x->CustomSpacing.spacing->Css_Js_Core.marginLeft\n  let marginTop = x => x->CustomSpacing.spacing->Css_Js_Core.marginTop\n  let marginRight = x => x->CustomSpacing.spacing->Css_Js_Core.marginRight\n\n  let breakpoint = (token: Breakpoints.breakpoints, styles) =>\n    Css_Js_Core.media(.\n      `(min-width:${token->Breakpoints.sizeByBreakpoints->Js.Int.toString}px)`,\n      styles,\n    )\n\n  /*\n   * Typography\n   */\n  let fontFamily = x => x->CustomTypography.fontFamily->Css_Js_Core.fontFamily\n  let fontSize = x => x->CustomTypography.fontSize->Css_Js_Core.fontSize\n  let fontWeight = x => x->CustomTypography.fontWeight->Css_Js_Core.fontWeight\n  let lineHeight = x => x->CustomTypography.lineHeight->Css_Js_Core.lineHeight\n  let letterSpacing = x => x->CustomTypography.letterSpacing->Css_Js_Core.letterSpacing\n\n  /*\n   * Shadows\n   */\n  module TokenizedShadow = {\n    let box = (~x=?, ~y=?, ~blur=?, ~spread=?, ~inset=?, color) =>\n      CssJs.Shadow.box(~x?, ~y?, ~blur?, ~spread?, ~inset?, color)\n\n    let text = (~x=?, ~y=?, ~blur=?, color) => CssJs.Shadow.text(~x?, ~y?, ~blur?, color)\n  }\n  let boxShadow = x => x->CustomShadows.boxShadow->CssJs.boxShadow\n  let textShadow = x => x->CustomShadows.textShadow->CssJs.textShadow\n  /*\n   *  HACK: Unfortunately we need to override these two fucntions\n   *  because we can't convert an array of tokens into an array of box-shadows.\n   */\n  let boxShadows = x => {\n    let value =\n      x\n      ->Js.Array2.map(CustomShadows.boxShadow)\n      ->Js.Array2.map(x =>\n        switch x {\n        | #...Css_Js_Core.Shadow.t as value => Css_Js_Core.Shadow.toString(value)\n        | #...Css_AtomicTypes.Var.t as value => Css_AtomicTypes.Var.toString(value)\n        }\n      )\n      ->Js.Array2.joinWith(\", \")\n\n    CssJs.unsafe(\"boxShadow\", value)\n  }\n\n  let textShadows = x => {\n    let value =\n      x\n      ->Js.Array2.map(CustomShadows.textShadow)\n      ->Js.Array2.map(x =>\n        switch x {\n        | #...Css_Js_Core.Shadow.t as value => Css_Js_Core.Shadow.toString(value)\n        | #...Css_AtomicTypes.Var.t as value => Css_AtomicTypes.Var.toString(value)\n        }\n      )\n      ->Js.Array2.joinWith(\", \")\n\n    CssJs.unsafe(\"textShadow\", value)\n  }\n\n  /*\n   * Aliases to make the DX compatible with @ancestor-ui/core\n   */\n  let bgColor = backgroundColor\n  let minW = minWidth\n  let maxW = maxWidth\n  let minH = minHeight\n  let maxH = maxHeight\n}\n"
  },
  {
    "path": "packages/css/src/AncestorCss_Config.res",
    "content": "module type Spacing = {\n  type spacing\n  let spacing: spacing => Css_AtomicTypes.Length.t\n}\n\nmodule type Radius = {\n  type radius\n  let radius: radius => Css_AtomicTypes.Length.t\n}\n\nmodule type ZIndex = {\n  type zIndex\n  let zIndex: zIndex => int\n}\n\nmodule type Colors = {\n  type colors\n  let colors: colors => AncestorCss_WrappedTypes.Color.t\n}\n\nmodule type Breakpoints = {\n  type breakpoints\n  let sizeByBreakpoints: breakpoints => int\n}\n\nmodule type Typography = {\n  type fontFamily\n  type fontSize\n  type fontWeight\n  type lineHeight\n  type letterSpacing\n\n  let fontFamily: fontFamily => AncestorCss_WrappedTypes.FontFamily.t\n  let fontSize: fontSize => Css_AtomicTypes.Length.t\n  let fontWeight: fontWeight => Css_AtomicTypes.FontWeight.t\n  let lineHeight: lineHeight => AncestorCss_WrappedTypes.LineHeight.t\n  let letterSpacing: letterSpacing => Css_AtomicTypes.Length.t\n}\n\nmodule type Shadows = {\n  type textShadow\n  type boxShadow\n\n  let textShadow: textShadow => AncestorCss_WrappedTypes.TextShadow.t\n  let boxShadow: boxShadow => AncestorCss_WrappedTypes.BoxShadow.t\n}\n"
  },
  {
    "path": "packages/css/src/AncestorCss_Context.res",
    "content": "\n"
  },
  {
    "path": "packages/css/src/AncestorCss_Stories.res",
    "content": "let default = Storybook.story(~title=\"Basic usage\", ~excludeStories=[\"CustomCss\"], ())\nmodule CustomCss = AncestorCss.Make(\n  AncestorCss.Defaults.Breakpoints,\n  {\n    type colors = [#primary | #secondary]\n    let colors = (x: colors) =>\n      switch x {\n      | #primary => #hex(\"fc0\")\n      | #secondary => #hex(\"363636\")\n      }\n  },\n  AncestorCss.Defaults.Spacing,\n  AncestorCss.Defaults.Radius,\n  AncestorCss.Defaults.ZIndex,\n  AncestorCss.Defaults.Typography,\n  {\n    include AncestorCss.Defaults.TextShadows\n    type boxShadow = [\n      | #simple\n      | #cool\n    ]\n\n    let boxShadow = x =>\n      switch x {\n      | #simple => CssJs.Shadow.box(~x=1->#px, ~y=2->#px, #hex(\"363636\"))\n      | #cool => #var(\"--cool-shadow\")\n      }\n  },\n)\n\nlet overview = () => {\n  open CustomCss\n\n  let className = style(. [\n    width(124->#px),\n    height(124->#px),\n    boxShadow(#cool),\n    bgColor(#secondary),\n    fontSize(24->#px),\n    breakpoint(\n      #sm,\n      [\n        boxShadow(#simple),\n        bgColor(#primary),\n        padding(4),\n        borderRadius(2),\n        border(1->#px, #solid, #primary),\n        width(300->#px),\n        height(300->#px),\n      ],\n    ),\n  ])\n\n  <div className />\n}\n"
  },
  {
    "path": "packages/css/src/AncestorCss_WrappedTypes.res",
    "content": "module LineHeight = {\n  type t = [\n    | #ch(float)\n    | #em(float)\n    | #ex(float)\n    | #rem(float)\n    | #vh(float)\n    | #vw(float)\n    | #vmin(float)\n    | #vmax(float)\n    | #px(int)\n    | #pxFloat(float)\n    | #cm(float)\n    | #mm(float)\n    | #inch(float)\n    | #pc(float)\n    | #pt(int)\n    | #zero\n    | #calc([#add | #sub | #mult], Css_AtomicTypes.Length.t, Css_AtomicTypes.Length.t)\n    | #percent(float)\n    | #var(string)\n    | #varDefault(string, string)\n    | #normal\n    | #abs(float)\n    | #initial\n    | #inherit_\n    | #unset\n  ]\n\n  let toRule: t => CssJs.rule = CssJs.lineHeight\n}\n\nmodule FontFamily = {\n  type t = [\n    | #custom(string)\n    | #serif\n    | #sansSerif\n    | #cursive\n    | #fantasy\n    | #monospace\n    | #systemUi\n    | #emoji\n    | #math\n    | #fangsong\n    | #var(string)\n    | #varDefault(string, string)\n    | #initial\n    | #inherit_\n    | #unset\n  ]\n\n  let toRule: t => CssJs.rule = CssJs.fontFamily\n}\n\nmodule Color = {\n  open Css_AtomicTypes\n  type t = [\n    | #rgb(int, int, int)\n    | #rgba(int, int, int, [#num(float) | Percentage.t])\n    | #hsl(Angle.t, Percentage.t, Percentage.t)\n    | #hsla(Angle.t, Percentage.t, Percentage.t, [#num(float) | Percentage.t])\n    | #hex(string)\n    | #transparent\n    | #currentColor\n    | #var(string)\n    | #varDefault(string, string)\n  ]\n\n  let toRule: t => CssJs.rule = CssJs.color\n}\n\nmodule BoxShadow = {\n  type t = [\n    | #none\n    | #shadow(CssJs.Shadow.value<CssJs.Shadow.box>)\n    | #var(string)\n    | #varDefault(string, string)\n  ]\n\n  let toRule: t => CssJs.rule = CssJs.boxShadow\n}\n\nmodule TextShadow = {\n  type t = [\n    | #none\n    | #shadow(CssJs.Shadow.value<CssJs.Shadow.text>)\n    | #var(string)\n    | #varDefault(string, string)\n  ]\n\n  let toRule: t => CssJs.rule = CssJs.textShadow\n}\n"
  },
  {
    "path": "packages/ui/.storybook/main.js",
    "content": "module.exports = {\n  stories: [\"../src/**/*_Stories.bs.js\"],\n  addons: [\n    \"@storybook/addon-links\",\n    \"@storybook/addon-essentials\",\n    \"@storybook/addon-interactions\",\n  ],\n  framework: \"@storybook/react\",\n};\n"
  },
  {
    "path": "packages/ui/.storybook/preview-head.html",
    "content": "<style>\n  * {\n    box-sizing: border-box;\n    font-family: \"DM Sans\", sans-serif;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p {\n    margin: 0;\n  }\n  html {\n    font-size: 10px;\n  }\n</style>\n\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap\"\n  rel=\"stylesheet\"\n/>\n"
  },
  {
    "path": "packages/ui/.storybook/preview.js",
    "content": "export const parameters = {\n  actions: { argTypesRegex: \"^on[A-Z].*\" },\n  controls: {\n    matchers: {\n      color: /(background|color)$/i,\n      date: /Date$/,\n    },\n  },\n}"
  },
  {
    "path": "packages/ui/bsconfig.json",
    "content": "{\n  \"name\": \"@rescriptbr/ancestor-ui\",\n  \"namespace\": \"AncestorUI\",\n  \"version\": \"0.0.1\",\n  \"sources\": [\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"commonjs\",\n      \"in-source\": true\n    }\n  ],\n  \"jsx\": { \"version\": 4, \"mode\": \"classic\" },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\n    \"@rescript/react\",\n    \"@ancestor-ui/core\",\n    \"@ancestor-ui/bindings\",\n    \"@ancestor-ui/css\",\n    \"bs-css\",\n    \"bs-css-emotion\"\n  ],\n  \"bs-dev-dependencies\": [],\n  \"ppx-flags\": []\n}\n"
  },
  {
    "path": "packages/ui/package.json",
    "content": "{\n  \"name\": \"@rescriptbr/ancestor-ui\",\n  \"version\": \"0.0.1\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"@babel/core\": \"7.20.5\",\n    \"@emotion/css\": \"11.10.0\",\n    \"@emotion/jest\": \"11.9.3\",\n    \"@rescript/react\": \"0.11.0-rc.3\",\n    \"@storybook/addon-actions\": \"6.5.15\",\n    \"@storybook/addon-essentials\": \"6.5.15\",\n    \"@storybook/addon-interactions\": \"6.5.15\",\n    \"@storybook/addon-links\": \"6.5.15\",\n    \"@storybook/builder-webpack4\": \"6.5.15\",\n    \"@storybook/manager-webpack4\": \"6.5.15\",\n    \"@storybook/react\": \"6.5.15\",\n    \"@storybook/testing-library\": \"0.0.13\",\n    \"babel-loader\": \"8.3.0\",\n    \"react\": \"18.2.0\",\n    \"react-dom\": \"18.2.0\",\n    \"rescript\": \"10.1.0\"\n  },\n  \"peerDependencies\": {\n    \"@rescript/react\": \">=0.11\",\n    \"react\": \">=18\",\n    \"react-dom\": \">=18\",\n    \"rescript\": \">=10\"\n  },\n  \"dependencies\": {\n    \"@ancestor-ui/core\": \"0.5.0\",\n    \"@ancestor-ui/bindings\": \"0.1.0\"\n  },\n  \"scripts\": {\n    \"storybook\": \"start-storybook -p 6006\",\n    \"build-storybook\": \"build-storybook\"\n  }\n}\n"
  },
  {
    "path": "packages/ui/src/AncestorUI.res",
    "content": "module Make = (\n  // Config\n  BreakpointsConfig: Ancestor_Config.Breakpoints,\n  ColorsConfig: Theme.CustomColorsConfig,\n  SpacingConfig: AncestorCss_Config.Spacing,\n  RadiusConfig: AncestorCss_Config.Radius,\n  ZIndexConfig: AncestorCss_Config.ZIndex,\n  Theme: Theme.T,\n) => {\n  module Config = {\n    include BreakpointsConfig\n    include ColorsConfig\n    include SpacingConfig\n    include RadiusConfig\n    include ZIndexConfig\n    include Theme\n  }\n  module Button = Button.Make(Config)\n}\n"
  },
  {
    "path": "packages/ui/src/Theme.res",
    "content": "module Colors = {\n  type colors<'custom> = [#primary | #secondary | #custom('custom)]\n}\n\nmodule type CustomColorsConfig = {\n  type colors\n  let colors: Colors.colors<colors> => Css_AtomicTypes.Color.t\n}\n\ntype theme = {button?: ButtonTokens.api}\n\nmodule type T = {\n  let theme: theme\n}\n\nmodule type Config = {\n  type breakpoints<'value>\n  type keyOfBreakpoints\n  type spacing\n  type radius\n  type colors\n  type zIndex\n  let encode: breakpoints<'value> => array<(keyOfBreakpoints, option<'value>)>\n  let zIndex: zIndex => int\n  let colors: Colors.colors<colors> => Css_AtomicTypes.Color.t\n  let spacing: spacing => Css_AtomicTypes.Length.t\n  let radius: radius => Css_AtomicTypes.Length.t\n  let sizeByBreakpoints: keyOfBreakpoints => int\n  let theme: theme\n}\n"
  },
  {
    "path": "packages/ui/src/components/button/Button.res",
    "content": "module Make = (Theme: Theme.Config) => {\n  @react.component\n  let make = () => <button />\n}\n"
  },
  {
    "path": "packages/ui/src/components/button/ButtonTokens.res",
    "content": "type size = [#xs | #sm | #md | #lg]\ntype color = [#primary | #secondary]\n\ntype defaults = {\n  size?: size,\n  colors?: color,\n}\n\ntype api = {\n  baseStyles?: array<CssJs.rule>,\n  size?: size => array<CssJs.rule>,\n  color?: color => array<CssJs.rule>,\n  defaults?: defaults,\n}\n"
  },
  {
    "path": "packages/ui/src/lib/AncestorCore.res",
    "content": "module Make = (Config: Theme.Config) => {\n  include Ancestor.Make(\n    {\n      type breakpoints<'value> = Config.breakpoints<'value>\n      type keyOfBreakpoints = Config.keyOfBreakpoints\n      let encode = Config.encode\n      let sizeByBreakpoints = Config.sizeByBreakpoints\n    },\n    {\n      type colors = Theme.Colors.colors<Config.colors>\n      let colors = Config.colors\n    },\n    {\n      type spacing = Config.spacing\n      let spacing = Config.spacing\n    },\n    {\n      type radius = Config.radius\n      let radius = Config.radius\n    },\n    {\n      type zIndex = Config.zIndex\n      let zIndex = Config.zIndex\n    },\n  )\n}\n"
  },
  {
    "path": "website/.gitignore",
    "content": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Generated files\n.docusaurus\n.cache-loader\n\n# Misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "website/.prettierignore",
    "content": "*.bs.js\n"
  },
  {
    "path": "website/.prettierrc",
    "content": "{\n  \"singleQuote\": true,\n  \"jsxSingleQuote\": true,\n  \"semi\": false,\n  \"trailingComma\": \"all\"\n}\n"
  },
  {
    "path": "website/README.md",
    "content": "# Website\n\nThis website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.\n\n## Installation\n\n```console\nyarn install\n```\n\n## Local Development\n\n```console\nyarn start\n```\n\nThis command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.\n\n## Build\n\n```console\nyarn build\n```\n\nThis command generates static content into the `build` directory and can be served using any static contents hosting service.\n\n## Deployment\n\n```console\nGIT_USER=<Your GitHub username> USE_SSH=true yarn deploy\n```\n\nIf you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.\n"
  },
  {
    "path": "website/babel.config.js",
    "content": "module.exports = {\n  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],\n}\n"
  },
  {
    "path": "website/bsconfig.json",
    "content": "{\n  \"name\": \"website\",\n  \"version\": \"0.0.1\",\n  \"sources\": [\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    },\n    {\n      \"dir\": \"docs\",\n      \"subdirs\": true\n    }\n  ],\n\n  \"package-specs\": [\n    {\n      \"module\": \"es6\",\n      \"in-source\": true\n    }\n  ],\n  \"reason\": {\n    \"react-jsx\": 3\n  },\n  \"suffix\": \".bs.js\",\n  \"bs-dependencies\": [\"@rescript/react\", \"@rescriptbr/ancestor\"]\n}\n"
  },
  {
    "path": "website/docs/_components/Placeholder.res",
    "content": "open Ancestor\n\n@react.component\nlet make = (\n  ~children=React.null,\n  ~bgColor=[xs(Theme.Colors.black)],\n  ~width=[xs(7.2->#rem)],\n  ~height=[xs(7.2->#rem)],\n) =>\n  <Box\n    lineHeight=[xs(1.6->#rem)]\n    textAlign=[xs(#center)]\n    display=[xs(#flex)]\n    alignItems=[xs(#center)]\n    justifyContent=[xs(#center)]\n    fontSize=[xs(18->#px)]\n    fontWeight=[xs(#700)]\n    width\n    height\n    color=[xs(Theme.Colors.white)]\n    borderRadius=[xs(1)]\n    bgColor>\n    children\n  </Box>\n"
  },
  {
    "path": "website/docs/_helpers/Emotion.res",
    "content": "@module(\"@emotion/css\") external css: {..} => string = \"css\"\n"
  },
  {
    "path": "website/docs/_helpers/Helpers.res",
    "content": "open Ancestor\n\nlet \\\"Wrapper\" = props => {\n  <Box\n    overflow=[xs(#hidden)]\n    position=[xs(#relative)]\n    border=[(1->#px, #solid, #hex(\"#cecece\"))->xs]\n    p=[xs(2), md(4)]\n    bgColor=[xs(#hex(\"#fff\"))]\n    borderRadius=[xs(1)]>\n    {props[\"children\"]}\n  </Box>\n}\n"
  },
  {
    "path": "website/docs/_helpers/Theme.res",
    "content": "module Colors = {\n  let black = #hex(\"#000\")\n  let white = #hex(\"#fafafa\")\n  let pink = #hex(\"#f36\")\n  let gray1 = #hex(\"#545454\")\n  let gray2 = #hex(\"#a1a1a1\")\n}\n"
  },
  {
    "path": "website/docs/_helpers/index.js",
    "content": "export * from './Helpers.bs'\n"
  },
  {
    "path": "website/docs/api/base.md",
    "content": "---\ntitle: <Base />\n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper, cleanUpCode } from '../_helpers'\nimport { make as FirstBaseExample } from './examples/FirstBaseExample.bs'\nimport FirstBaseExampleSource from '!!raw-loader!./examples/FirstBaseExample.res'\n\n`<Base />` works as a component to build other components that accepts responsive props.\n\n## Example\n\n<CodeBlock className=\"language-rescript\"> {FirstBaseExampleSource}</CodeBlock>\n\n<Wrapper>\n  <FirstBaseExample />\n</Wrapper>\n\n## Props\nBase component accepts all props defined by the [system props](/docs/system-props).\nFurthermore, the component accepts the following properties:\n\n### `tag`\n\nDefines the tag that will be rendered\n\nDefault: `#div`\n- Type: `responsiveProp<[`\n  - `| #a`\n  - `| #abbr`\n  - `| #acronym`\n  - `| #address`\n  - `| #applet`\n  - `| #area`\n  - `| #article`\n  - `| #aside`\n  - `| #audio`\n  - `| #b`\n  - `| #base`\n  - `| #basefont`\n  - `| #bdo`\n  - `| #big`\n  - `| #blockquote`\n  - `| #body`\n  - `| #br`\n  - `| #button`\n  - `| #canvas`\n  - `| #caption`\n  - `| #center`\n  - `| #cite`\n  - `| #code`\n  - `| #col`\n  - `| #colgroup`\n  - `| #datalist`\n  - `| #dd`\n  - `| #del`\n  - `| #dfn`\n  - `| #div`\n  - `| #dl`\n  - `| #dt`\n  - `| #em`\n  - `| #embed`\n  - `| #fieldset`\n  - `| #figcaption`\n  - `| #figure`\n  - `| #font`\n  - `| #footer`\n  - `| #form`\n  - `| #frame`\n  - `| #frameset`\n  - `| #head`\n  - `| #header`\n  - `| #h1`\n  - `| #h2`\n  - `| #h3`\n  - `| #h3`\n  - `| #h4`\n  - `| #h5`\n  - `| #h6`\n  - `| #hr`\n  - `| #html`\n  - `| #i`\n  - `| #iframe`\n  - `| #img`\n  - `| #input`\n  - `| #ins`\n  - `| #kbd`\n  - `| #label`\n  - `| #legend`\n  - `| #li`\n  - `| #link`\n  - `| #main`\n  - `| #map`\n  - `| #mark`\n  - `| #meta`\n  - `| #meter`\n  - `| #nav`\n  - `| #noscript`\n  - `| #object`\n  - `| #ol`\n  - `| #optgroup`\n  - `| #option`\n  - `| #p`\n  - `| #param`\n  - `| #pre`\n  - `| #progress`\n  - `| #q`\n  - `| #s`\n  - `| #samp`\n  - `| #script`\n  - `| #section`\n  - `| #select`\n  - `| #small`\n  - `| #source`\n  - `| #span`\n  - `| #strike`\n  - `| #strong`\n  - `| #style`\n  - `| #sub`\n  - `| #sup`\n  - `| #table`\n  - `| #tbody`\n  - `| #td`\n  - `| #textarea`\n  - `| #tfoot`\n  - `| #th`\n  - `| #thead`\n  - `| #time`\n  - `| #title`\n  - `| #tr`\n  - `| #u`\n  - `| #ul`\n  - `| #var`\n  - `| #video`\n  - `| #wbr`\n\n  `]>`\n\n\n"
  },
  {
    "path": "website/docs/api/box.mdx",
    "content": "---\ntitle: <Box />\n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper } from '../_helpers'\nimport { make as FirstBoxExample } from './examples/FirstBoxExample.bs'\nimport FirstBoxExampleSource from '!!raw-loader!./examples/FirstBoxExample.res'\n\n`<Box />` works as a wrapper to change the appearance of elements through utility properties.\nIt's also used as a column component with [`<Grid />`](/docs/api/grid).\n\n## Example\n\n<CodeBlock className='language-rescript'> {FirstBoxExampleSource}</CodeBlock>\n\n:::important\nResize your browser to see the responsive styles in action.\n:::\n\n<Wrapper>\n  <FirstBoxExample />\n</Wrapper>\n\n## Props\n\n`<Box />` acceppts all props defined by the [system props](/docs/system-props).\nFurthermore, it also accepts the following properties:\n\n### `columns`\n\nDefines the column size inside of a [Grid](/docs/api/grid) component.\n\n- Type: `responsiveProp<[`\n   - ` | # auto`\n   - ` | #1`\n   - ` | #2`\n   - ` | #3`\n   - ` | #4`\n   - ` | #5`\n   - ` | #6`\n   - ` | #7`\n   - ` | #8`\n   - ` | #9`\n   - ` | #10`\n   - ` | #11`\n   - ` | #12`\n\n `]>`\n\n- Optional: `true`\n\n:::important\n The `responsiveProp` is a customizable type defined in the Ancestor's setup.\n You can see the default breakpoints defined in the **[Ancestor's default setup](/docs/customization#default-breakpoints)** or define **[your own breakpoints](/docs/customization#custom-breakpoints)**.\n:::\n"
  },
  {
    "path": "website/docs/api/examples/FirstBaseExample.res",
    "content": "open Ancestor\n\n@react.component\nlet make = () => {\n  <Base display=[#xs(#flex)] justifyContent=[#xs(#center)] width=[#xs(100.->#pct)]>\n    <Base\n      display=[#xs(#flex)]\n      flexDirection=[#xs(#column)]\n      justifyContent=[#xs(#center)]\n      alignItems=[#xs(#center)]\n      maxW=[#xs(356->#px)]\n      borderRadius=[#xs(1)]\n      p=[#xs(3)]\n      bgColor=[#xs(#hex(\"#000\"))]\n      tag=#section>\n      <Base\n        border=[#xs((2->#px, #solid, #hex(\"#f36\")))]\n        borderRadius=[#xs(6)]\n        height=[#xs(96->#px)]\n        width=[#xs(96->#px)]\n        src=\"/img/ww-picture.png\"\n        tag=#img\n        mb=[#xs(2)]\n      />\n      <Typography\n        color=[#xs(#hex(\"#fff\"))]\n        m=[#xs(0)]\n        textAlign=[#xs(#center)]\n        fontSize=[#xs(24->#px)]\n        tag=#h1>\n        {\"Walter White\"->React.string}\n      </Typography>\n      <Typography\n        textAlign=[#xs(#center)] color=[#xs(#hex(\"#545454\"))] fontSize=[#xs(20->#px)] tag=#p>\n        {\"Teacher\"->React.string}\n      </Typography>\n      <Typography\n        textAlign=[#xs(#center)] color=[#xs(#hex(\"#a1a1a1\"))] fontSize=[#xs(16->#px)] tag=#p>\n        {\"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old\"->React.string}\n      </Typography>\n    </Base>\n  </Base>\n}\n"
  },
  {
    "path": "website/docs/api/examples/FirstBoxExample.res",
    "content": "open Ancestor\n\n@react.component\nlet make = () => {\n  <Box\n    bgColor=[xs(#hex(\"#000\"))]\n    p=[xs(3), md(4)]\n    display=[xs(#flex)]\n    justifyContent=[xs(#\"flex-start\"), lg(#\"space-between\")]\n    alignItems=[xs(#center)]\n    flexDirection=[xs(#column), lg(#row)]>\n    <Box mr=[xs(0), lg(6)] mb=[xs(2), lg(0)]>\n      <Typography\n        textAlign=[xs(#center), lg(#left)]\n        color=[xs(#hex(\"#fff\"))]\n        mb=[xs(0)]\n        tag=#h1\n        fontSize=[xs(24->#px), md(32->#px)]\n        m=[xs(0)]>\n        {`Start using right now`->React.string}\n      </Typography>\n      <Typography\n        textAlign=[xs(#center), lg(#left)]\n        color=[xs(#hex(\"#b1b1b1\"))]\n        tag=#p\n        m=[xs(0)]\n        lineHeight=[xs(20->#px)]>\n        {`Ancestor is production-ready and actively maintained. It’s used in production projects daily and keep breaking changes to a minimum whereever possible.`->React.string}\n      </Typography>\n    </Box>\n    <Base\n      bgColor=[xs(#hex(\"#fafafa\"))]\n      borderStyle=[xs(#none)]\n      fontSize=[xs(18->#px)]\n      width=[xs(256->#px)]\n      height=[xs(48->#px)]\n      borderRadius=[xs(3)]\n      fontWeight=[xs(#600)]\n      tag=#button>\n      {\"Let's start\"->React.string}\n    </Base>\n  </Box>\n}\n"
  },
  {
    "path": "website/docs/api/examples/FirstGridExample.res",
    "content": "open Ancestor\n\n@react.component\nlet make = () => {\n  <Grid justifyContent=[#xs(#\"space-between\")] spacing=[#xs(1), #md(3)]>\n    <Box columns=[#xs(#12), #md(#6)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"6\"->React.string} </Placeholder>\n    </Box>\n    <Box columns=[#xs(#12), #md(#6)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"6\"->React.string} </Placeholder>\n    </Box>\n    <Box columns=[#xs(#12)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"12\"->React.string} </Placeholder>\n    </Box>\n    <Box columns=[#xs(#12), #md(#4)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"xs 12 / md 4\"->React.string} </Placeholder>\n    </Box>\n    <Box columns=[#xs(#12), #md(#4)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"xs 12 / md 4\"->React.string} </Placeholder>\n    </Box>\n    <Box columns=[#xs(#12), #md(#4)]>\n      <Placeholder width=[xs(100.0->#pct)]> {\"xs 12 / md 4\"->React.string} </Placeholder>\n    </Box>\n  </Grid>\n}\n"
  },
  {
    "path": "website/docs/api/examples/FirstHiddenExample.res",
    "content": "open Ancestor\n\n@react.component\nlet make = () => {\n  <Stack direction=[xs(#horizontal)] gap=[xs(#one(2))]>\n    <Hidden on=[md(true)]> <Placeholder> {\"Visible below md\"->React.string} </Placeholder> </Hidden>\n    <Placeholder bgColor=[xs(Theme.Colors.gray2)]> {\"Always visible\"->React.string} </Placeholder>\n    <Hidden on=[xs(true), md(false)]>\n      <Placeholder bgColor=[xs(Theme.Colors.pink)]> {\"Hidden below md\"->React.string} </Placeholder>\n    </Hidden>\n  </Stack>\n}\n"
  },
  {
    "path": "website/docs/api/examples/FirstStackExample.res",
    "content": "open Ancestor\n\n@react.component\nlet make = () => {\n  <Box display=[xs(#flex)] justifyContent=[xs(#center)]>\n    <Box maxW=[md(300->#px)] width=[xs(100.0->#pct)]>\n      <Stack spacing=[xs(2)] direction=[xs(#horizontal), md(#vertical)]>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n      </Stack>\n    </Box>\n  </Box>\n}\n"
  },
  {
    "path": "website/docs/api/examples/SecondStackExample.res",
    "content": "open Ancestor\n\nmodule Divider = {\n  @react.component\n  let make = () => <Box height=[xs(2->#px)] bgColor=[xs(#hex(\"#cecece\"))] />\n}\n\n@react.component\nlet make = () => {\n  <Box display=[xs(#flex)] justifyContent=[xs(#center)]>\n    <Box maxW=[md(300->#px)] width=[xs(100.0->#pct)]>\n      <Stack spacing=[xs(3)] divider={<Divider />}>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n        <Placeholder width=[xs(100.0->#pct)]> {\"Item\"->React.string} </Placeholder>\n      </Stack>\n    </Box>\n  </Box>\n}\n"
  },
  {
    "path": "website/docs/api/grid.mdx",
    "content": "---\ntitle: <Grid /> \n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper, cleanUpCode } from '../_helpers'\nimport { make as FirstGridExample } from './examples/FirstGridExample.bs.js'\nimport FirstGridExampleSource from '!!raw-loader!./examples/FirstGridExample.res'\n\n`<Grid />` is a component based on a 12-column grid layout.\n\n## Example\n\n<CodeBlock className='language-rescript'> {FirstGridExampleSource}</CodeBlock>\n\n:::important\nResize your browser to see the responsive styles in action.\n:::\n\n<Wrapper>\n  <FirstGridExample />\n</Wrapper>\n\n## Props\n\n`<Grid />` accepts all props defined by the [system props](/docs/system-props).\nFurthermore, it also accepts the following properties:\n\n### `spacing`\n\n- Type: `responsiveProp<int>`\n\n- Optional: `true`\n\n:::important\n The `responsiveProp` is a customizable type defined in the Ancestor's setup.\n You can see the default breakpoints defined in the **[Ancestor's default setup](/docs/customization#default-breakpoints)** or define **[your own breakpoints](/docs/customization#custom-breakpoints)**.\n:::\n"
  },
  {
    "path": "website/docs/api/hidden.md",
    "content": "---\ntitle: <Hidden /> \n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper } from '../_helpers'\nimport { make as FirstHiddenExample } from './examples/FirstHiddenExample.bs'\nimport FirstHiddenExampleSource from '!!raw-loader!./examples/FirstHiddenExample.res'\n\n`<Hidden />` is used to visually hide components.\n\n## Example\n\n<CodeBlock className='language-rescript'> {FirstHiddenExampleSource}</CodeBlock>\n\n:::important\nResize your browser to see the responsive styles in action.\n:::\n\n<Wrapper>\n  <FirstHiddenExample />\n</Wrapper>\n\n## Props\n`<Hidden />` acceppts all props defined by the [system props](/docs/system-props).\nFurthermore, it also accepts the following properties:\n\n### `on`\n- Type: `responsiveProp<bool>`\n- Optional: True\n\n:::important\n The `responsiveProp` is a customizable type defined in the Ancestor's setup.\n You can see the default breakpoints defined in the **[Ancestor's default setup](/docs/customization#default-breakpoints)** or define **[your own breakpoints](/docs/customization#custom-breakpoints)**.\n:::\n"
  },
  {
    "path": "website/docs/api/stack.md",
    "content": "---\ntitle: <Stack /> \n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper } from '../_helpers'\nimport { make as FirstStackExample } from './examples/FirstStackExample.bs'\nimport { make as SecondStackExample } from './examples/SecondStackExample.bs'\nimport FirstStackExampleSource from '!!raw-loader!./examples/FirstStackExample.res'\nimport SecondStackExampleSource from '!!raw-loader!./examples/SecondStackExample.res'\n\n`<Stack />` is a component used to group elements together.\n\n\n## Example\n\n<CodeBlock className='language-rescript'> {FirstStackExampleSource}</CodeBlock>\n\n:::important\nResize your browser to see the responsive styles in action.\n:::\n\n<Wrapper>\n  <FirstStackExample />\n</Wrapper>\n\n## Using dividers\n\n<CodeBlock className='language-rescript'> {SecondStackExampleSource}</CodeBlock>\n\n<Wrapper>\n  <SecondStackExample />\n</Wrapper>\n\n\n\n## Props\n`<Stack />` accepts all props defined by the system props. Furthermore, it also accepts the following properties:\n\n### `spacing`\n- Type: `responsiveProp<Config.spacing>`\n- Optional: True\n\n### `direction`\n- Type: `responsiveProp<[ #vertical | #horizontal ]>`\n- Optional: True\n\n### `divider`\n- Type: `React.element`\n- Optional: True\n\n\n:::important\n The `responsiveProp` is a customizable type defined in the Ancestor's setup.\n You can see the default breakpoints defined in the **[Ancestor's default setup](/docs/customization#default-breakpoints)** or define **[your own breakpoints](/docs/customization#custom-breakpoints)**.\n:::\n"
  },
  {
    "path": "website/docs/customization/Customization_Breakpoints1.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  // highlight-start\n  type breakpoints<'value> = [\n    | #small('value)\n    | #medium('value)\n    | #large('value)\n  ]\n\n  let sizeByBreakpoints = values =>\n    switch values {\n    | #small(_) => 0\n    | #medium(_) => 600\n    | #large(_) => 1280\n    }\n\n  let unboxBreakpointValue = values =>\n    switch values {\n    | #small(v) => v\n    | #medium(v) => v\n    | #large(v) => v\n    }\n  // highlight-end\n\n  type spacing = spacing\n  let spacing = spacing\n\n  type radius = radius\n  let radius = radius\n\n  type colors = colors\n  let colors = colors\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  let css = Ancestor.DefaultConfig.css\n})\n\nmodule App = {\n  open AncestorCustom\n\n  @react.component\n  let make = () => {\n    <Grid>\n      <Box columns=[#small(#12), #medium(#6)]> {\"Your components here...\"->React.string} </Box>\n    </Grid>\n  }\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_Colors1.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let unboxBreakpointValue = unboxBreakpointValue\n  let sizeByBreakpoints = sizeByBreakpoints\n  let css = css\n\n  type spacing = spacing\n  let spacing = spacing\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  //highlight-start\n  type colors = [\n    | #primary100\n    | #secondary100\n    | #background\n  ]\n\n  let colors = token =>\n    switch token {\n    | #primary100 => #hex(\"#000\")\n    | #secondary100 => #hex(\"#cecece\")\n    | #background => #hex(\"#fafafa\")\n    }\n  //highlight-end\n\n  type radius = radius\n  let radius = radius\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  // highlight-start\n  <Box bgColor=[#xs(#background)]>\n    <Typography color=[#xs(#primary100), #md(#secondary100)]>\n      {\"Your text here...\"->React.string}\n    </Typography>\n  </Box>\n  // highlight-end\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_Radius1.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let unboxBreakpointValue = Ancestor.DefaultConfig.unboxBreakpointValue\n  let sizeByBreakpoints = Ancestor.DefaultConfig.sizeByBreakpoints\n  let css = Ancestor.DefaultConfig.css\n\n  type spacing = spacing\n  let spacing = spacing\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  type colors = colors\n  let colors = colors\n\n  // highlight-start\n  type radius = Ancestor_Css.Length.t\n  let radius = v => v\n  // highlight-end\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  // highlight-start\n  <Box borderRadius=[#xs(24->#px)]> <Box borderRadius=[#xs(32->#px)] /> </Box>\n  // highlight-end\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_Spacing1.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  include Ancestor.DefaultConfig\n\n  let spacing = v => #px(v * 4)\n})\n"
  },
  {
    "path": "website/docs/customization/Customization_Spacing2.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let sizeByBreakpoints = sizeByBreakpoints\n  let unboxBreakpointValue = unboxBreakpointValue\n\n  //highlight-start\n  type spacing = float\n  let spacing = v => #pxFloat(v *. 8.0)\n  //highlight-end\n\n  type radius = radius\n  let radius = radius\n\n  type colors = colors\n  let colors = colors\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  let css = Ancestor.DefaultConfig.css\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  //highlight-start\n  <Box m=[#md(2.25)]> <Box p=[#xs(4.0), #md(3.0)] /> </Box>\n  //highlight-end\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_Spacing3.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let sizeByBreakpoints = sizeByBreakpoints\n  let unboxBreakpointValue = unboxBreakpointValue\n\n  //highlight-start\n  type spacing = [#xs | #md | #lg]\n  let spacing = v =>\n    switch v {\n    | #xs => #px(8)\n    | #md => #px(16)\n    | #lg => #px(24)\n    }\n  //highlight-end\n\n  type radius = radius\n  let radius = radius\n\n  type colors = colors\n  let colors = colors\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  let css = Ancestor.DefaultConfig.css\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  <Box m=[#md(#lg)]> <Box p=[#xs(#md), #md(#lg)] /> </Box>\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_Spacing4.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let unboxBreakpointValue = Ancestor.DefaultConfig.unboxBreakpointValue\n  let sizeByBreakpoints = Ancestor.DefaultConfig.sizeByBreakpoints\n  let css = Ancestor.DefaultConfig.css\n\n  type zIndex = zIndex\n  let zIndex = zIndex\n\n  type colors = colors\n  let colors = colors\n\n  type radius = radius\n  let radius = radius\n\n  // highlight-start\n  type spacing = Ancestor_Css.Length.t\n  let spacing = v => v\n  // highlight-end\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  // highlight-start\n  <Box m=[#xs(24->#px)]> <Box p=[#xs(32->#px)] /> </Box>\n  // highlight-end\n}\n"
  },
  {
    "path": "website/docs/customization/Customization_ZIndex1.res",
    "content": "module AncestorCustom = Ancestor.Make({\n  open Ancestor.DefaultConfig\n\n  type breakpoints<'value> = breakpoints<'value>\n  let unboxBreakpointValue = unboxBreakpointValue\n  let sizeByBreakpoints = sizeByBreakpoints\n  let css = css\n\n  type spacing = spacing\n  let spacing = spacing\n\n  //highlight-start\n  type zIndex = [\n    | #base\n    | #above\n    | #aboveAll\n  ]\n\n  let zIndex = token =>\n    switch token {\n    | #base => 5\n    | #above => 15\n    | #aboveAll => 20\n    }\n  //highlight-end\n\n  type colors = colors\n  let colors = colors\n\n  type radius = radius\n  let radius = radius\n})\n\n@react.component\nlet make = () => {\n  open AncestorCustom\n\n  // highlight-start\n  <Box position=[#xs(#relative)]>\n    <Box zIndex=[#xs(#base)] position=[#xs(#absolute)] />\n    <Box zIndex=[#xs(#above)] position=[#xs(#absolute)] />\n  </Box>\n  // highlight-end\n}\n"
  },
  {
    "path": "website/docs/customization/customization.md",
    "content": "import CodeBlock from '@theme/CodeBlock'\nimport { Wrapper, cleanUpCode } from '../_helpers'\nimport CustomizatBreakpoints1 from '!!raw-loader!./Customization_Breakpoints1.res'\nimport CustomizationSpacing1 from '!!raw-loader!./Customization_Spacing1.res'\nimport CustomizationSpacing2 from '!!raw-loader!./Customization_Spacing2.res'\nimport CustomizationSpacing3 from '!!raw-loader!./Customization_Spacing3.res'\nimport CustomizationSpacing4 from '!!raw-loader!./Customization_Spacing4.res'\nimport CustomizationRadius1 from '!!raw-loader!./Customization_Radius1.res'\nimport CustomizationColors1 from '!!raw-loader!./Customization_Colors1.res'\nimport CustomizationZIndex1 from '!!raw-loader!./Customization_ZIndex1.res'\n\n# Customization\n\nAncestor take advantage of [Module Functors](https://rescript-lang.org/docs/manual/v8.0.0/module#module-functions-functors) for customization of breakpoints, spacing, radius, etc.\n\n## Default setup\n\nThe customization interface has the following type signature:\n\n```rescript title=\"Ancestor_Config.res\"\nmodule type T = {\n  type breakpoints<'value>\n  type spacing\n  type radius\n  type colors\n  type zIndex\n\n  let spacing: spacing => Ancestor_Css.Length.t\n  let radius: radius => Ancestor_Css.Length.t\n  let unboxBreakpointValue: breakpoints<'value> => 'value\n  let sizeByBreakpoints: breakpoints<'value> => int\n  let css: string => string\n}\n```\n\nAnd the default setup has the following values and types:\n\n```rescript\nmodule DefaultConfig = {\n  type breakpoints<'a> = [#xs('a) | #sm('a) | #md('a) | #lg('a) | #xl('a)]\n  let sizeByBreakpoints = values =>\n    switch values {\n    | #xs(_) => 0\n    | #sm(_) => 475\n    | #md(_) => 920\n    | #lg(_) => 1280\n    | #xl(_) => 1920\n    }\n\n  let unboxBreakpointValue = values =>\n    switch values {\n    | #xs(v) => v\n    | #sm(v) => v\n    | #md(v) => v\n    | #lg(v) => v\n    | #xl(v) => v\n    }\n\n  type colors = Ancestor_Css.Color.t\n  let colors = v => v\n\n  type spacing = int\n  let spacing = spacing => #px(spacing * 8)\n\n  type radius = int\n  let radius = radius => #px(radius * 8)\n\n  type zIndex = int\n  let zIndex = v => v\n\n  let css = Ancestor_Emotion.css\n}\n```\n\n## Breakpoints\n\n### Default breakpoints\n\nAncestor's breakpoints are customizable. The default setup has the following values:\n\n- `xs` 0px → 475px\n- `sm` 475px → 920px\n- `md` 920px → 1280px \n- `lg` 1280px → 1440px\n- `xl` 1440px\n\n### Custom breakpoints \n\nIf you wish, you can customize **only** the breakpoints by overriding all types and values from the default setup:\n\n<CodeBlock className=\"language-rescript\"> {CustomizatBreakpoints1}</CodeBlock>\n\nBeyond the type definition, you need to define two functions:\n\n#### `sizeByBreakpoints`\n  - Type: `let sizeByBreakpoints: breakpoints<'value> => int`\n  - Description: A function that receives a `breakpoint<'value>` and returns an integer (the breakpoint value in `px`).\n\n\n#### `unboxBreakpointValue`\n  - Type: `let unboxBreakpointValue: breakpoints<'value> => 'value` \n  - Description: A function that receives a `breakpoint<'value>`, \"unbox\" and returns its value.\n\n:::important\nAll Ancestor's components properties are an **array** of **breakpoints**.  If you want a property with the same value in all breakpoints, you need to provide the value for the lowest breakpoint.\n:::\n\n:::tip\nIf you wish, you can create **\"aliases functions\"** to replace the variants that you defined in your custom setup. \nInstead of write `display=[#xs(#flex)]` you can write `display=[xs(#flex)]`. In some cases, it improves the code readability.\n:::\n\n## Spacing\nThe `spacing` api is fully customizable. By default, Ancestor uses `int` and a scale factor of `8px` to keep the spacing consistent between the elements.\nYou can customize the scale factor by providing a new value for the `spacing` function:\n\n<CodeBlock className=\"language-rescript\"> {CustomizationSpacing1}</CodeBlock>\n\n### Customizing the type of `spacing` props\nYou can also customize the type of the spacing properties. This feature is very useful when you need to use scale values like `1.25`, `2.5`, etc. Let's see how to use `float` instead of int:\n<CodeBlock className=\"language-rescript\"> {CustomizationSpacing2}</CodeBlock>\n\n### Using design tokens\nWe can also define a set of spacing tokens using polymorphic variants. Sometimes the design team doesn't use scale values like `1` or `1.5`, but they define a set of design tokens that represents a value in `px`. Let's see how to do this with Ancestor:\n<CodeBlock className=\"language-rescript\"> {CustomizationSpacing3}</CodeBlock>\n\n### Using CSS units\nSometimes, you just want to use CSS units like `rem` or `px`:\n<CodeBlock className=\"language-rescript\"> {CustomizationSpacing4}</CodeBlock>\n\n## Border Radius\nAll of those customizations above, also works for the radius. You need just to replace the `spacing` type and value by `radius`. Let's see:\n<CodeBlock className=\"language-rescript\"> {CustomizationRadius1}</CodeBlock>\n\n## Colors\nBy default, Ancestor uses `Ancestor_Css.Color.t` as the type definition for the colors, which means that you're able to use\ncss colors like `#hex(...)` or `rgb(...)`. However, sometimes you have a well defined set of colors that you're going to use in your components.\nLet's see how to combine Ancestor and polyvariants to create type safe custom design tokens:\n<CodeBlock className=\"language-rescript\"> {CustomizationColors1}</CodeBlock>\n\n## ZIndex\nBy default, Ancestor uses `int` as the type definition for the `z-index`.\nManaging `z-index` might become difficult sometimes. Here's an example of how combine Ancestor and polyvariants to create type safe tokens for zIndex:\n<CodeBlock className=\"language-rescript\"> {CustomizationZIndex1}</CodeBlock>\n\n## CSS in JS\nTo generate styles Ancestor uses [@emotion/css](https://emotion.sh/docs/introduction).\nIf you wish, you can use another CSS in JS library that provides an equivalent function, like [Goober](https://github.com/cristianbote/goober#csstaggedtemplate)\nor [styled-components](https://styled-components.com/docs/api#css).\n\n```rescript\n\nmodule Goober = {\n  @module(\"goober\") external css: string => string = \"css\"\n}\n\nmodule AncestorCustom = Ancestor.Make({\n  include Ancestor.DefaultConfig\n\n  let css = Goober.css\n})\n```\n"
  },
  {
    "path": "website/docs/getting-started.md",
    "content": "# Getting started\n\nStep by step to install Ancestor in your project.\n\n:::important\nThis project assumes that you have a functional project with ReScript and React. Check out [how to create a ReScript project with React](https://rescript-lang.org/docs/react/latest/installation).\n:::\n\n## Installation\n\nFirst off, install **Ancestor** using npm/yarn:\n\n```sh title=\"Terminal\"\nyarn add @rescriptbr/ancestor\n```\n\nIf you want to use the default setup, you need to install [Emotion](https://emotion.sh).\n```sh title=\"Terminal\"\nyarn add @emotion/css\n```\n:::important\nThis step is optional. Ancestor is agnostic of CSS in JS library. You can use any CSS in JS library of your preference by providing a CSS function on the setup.\nRead more about it on the [**customization section**](/docs/customization#css-in-js).\n:::\n\nAdd the package to `bs-dependencies` in your `bsconfig.json`:\n\n```json title=\"bsconfig.json\"\n{\n ...\n\"bs-dependencies\": [\n  \"@rescript/react\",\n  \"@rescriptbr/ancestor\"\n ]\n}\n\n```\n\n## Basic usage\n\nAncestor comes with a default setup. You can use the default setup by exposing the module writing `open Ancestor`:\n\n```rescript title=\"App.res\"\nopen Ancestor\n\n@react.component\nlet make = () => {\n  <Grid>\n    <Box\n      columns=[#xs(#12), #md(#6), #lg(#4)]\n      display=[#xs(#flex)]\n      alignItems=[#xs(#center)]\n      px=[#xs(8), #md(12)]\n      mt=[#xs(12)]\n    >\n      {React.string(\"Hello\")}\n    </Box>\n\n    <Box\n      columns=[#xs(#12), #md(#6), #lg(#4)]\n      display=[#xs(#flex)]\n      alignItems=[#xs(#center)]\n      py=[#xs(6), #md(8)]\n      m=[#xs(12)]\n    >\n      {React.string(\"World\")}\n    </Box>\n  </Grid>\n}\n```\n\n:::important\nIf you wish, you can customize the default setup by following the **[instructions of customization](/docs/customization)**.\n:::\n\n"
  },
  {
    "path": "website/docs/intro.md",
    "content": "# Introduction\n\n**Ancestor** is a suite of components that works as layout primitives to develop high-quality \nweb apps, design systems, and style guides focused on responsiveness.\n\n## What and Why?\nEvery front-end project that is using libraries based on components like [React](https://reactjs.org), faces the same situation: \n**Choose or develop a UI library to develop the interfaces.**\n\nIn some cases, you can use libraries like [Chakra UI](https://chakra-ui.com/), [Material UI](https://material-ui.com/pt/), or\n[Ant Design](https://material-ui.com/pt/) that delivers a set of styled components (grids, buttons, inputs, selects, etc) \nand a lot of other utility functions and components for your web app.\n\nHowever, in some cases, the team needs to create its own design system or style guide with a design language, colors, fonts, buttons, inputs\nand other specifications created by a design team. In this case, the usage of a library like Material UI or Chakra UI might \nnot be the best choice, because depends on a lot of customizations or changes to adapt the library to the design specification.\n\nIt was the rescript that we created Ancestor: **to act as a foundation for your project or design system.**\n\n## Features\n\n### Unstyled 💀\n\nDifferent from popular libraries like Material UI, we don't deliver styled components with colors, fonts, borders, etc. \nAll Ancestor's components are **layout primitives** with support to a lot of CSS properties like padding, margin, height, width, etc.\n\n### Responsiveness 💡\nAll properties from Ancestor's components are responsive, which makes it easy to develop interfaces that need to support multiple devices. \nThrough the **breakpoints** defined by the library, you can change the appearance of a component in a specific device or screen size.\n\n### Consistent design 🎨\nWe don't deliver styled components, but we care about design consistency, especially when dealing with spacing, borders, etc.\n\n### Customizable ⚙️\n\nAll properties from Ancestor's components and parameters are customizable: \nBreakpoints, spacing, radius, grid columns, etc which makes it easy to customize and adapt Ancestor to your design system or style guide.\n\n## Basic usage\n\n```rescript\nopen Ancestor\n\n@react.component\nlet make = () => {\n  <Grid height=[xs(100.0->#pct)]>\n    <Box\n      flexDirection=[xs(#column), md(#row)]\n      p=[xs(6), md(12), lg(8)]\n      position=[xs(#relative)]\n      columns=[xs(#12), md(#6)]\n    >\n      <Box\n        flexGrow=[xs(#number(1.0))]\n        width=[xs(15.0->#rem), md(20.0->#rem)]\n      >\n        <Logo />\n      </Box>\n      <Box flexGrow=[xs(#number(3.0))] pt=[xs(4)]>\n        <h1>\n          {\"A place to share knowledge\"->React.string}\n        </h1>\n        <p>\n          {\"Where good ideas find you.\"->React.string}\n        </p>\n      </Box>\n      <Box\n        position=[xs(#absolute)]\n        bottom=[xs(-5.0->#rem)]\n        left=[xs(-5.0->#rem)]\n      >\n          ....\n      </Box>\n    </Box>\n  </Grid>\n}\n\n```\n\n_ Example from [ReScript Conduit](https://github.com/rescriptbr/rescript-conduit/blob/master/src/pages/Signin/Signin.res)_\n"
  },
  {
    "path": "website/docs/system-props.md",
    "content": "---\ntitle: System props\n---\n\n# System props\n\nThis page list all utility props of all Ancestor's components like `Base` or `Box`.\n\n## API\n\n:::caution\nWe don't support all CSS props yet. It's still work in progress.\n:::\n\n\nSince all Ancestor's utility props are responsive, they are typed as `responsiveProp<'value>`. \nIf you want to understand more, see the following example:\n\n```rescript title=Ancestor_Styles.res\n  type responsiveProp = array<breakpoints<'a>>\n```\n> :bulb: Check out the module [Ancestor_Styles.res](https://github.com/rescriptbr/ancestor/blob/master/lib/src/core/Ancestor_Styles.res#L15).\n\nThe breakpoint type is customizable (check out the [customization section](/docs/customization)), by default it has the following type signature:\n\n```rescript \n  type breakpoint<'a> = [#xs('value') | #md('a) | #lg('a) | #xl('a)]\n```\n\nNow, see a type signature of a component property:\n\n```rescript title=Ancestor_Base.res\n  module Base = {\n    @react.component\n    let make = (\n      ~display: option<Ancestor_Styles.responsiveProp<[#flex | #block]>>=?,\n      // Other props\n    ) => // ...\n  }\n```\n\n_Check out the module [Ancestor_Base.res](https://github.com/rescriptbr/ancestor/blob/master/lib/src/core/Ancestor_Base.res)_.\n\nExample of usage: \n\n```rescript title=App.res\n  open Ancestor.Default\n\n  <Base display=[#xs(#flex)]>\n    ...\n  </Base>\n\n```\n:::important\nAll utility props are optional.\n:::\n\n### Properties reference\n\n### Spacing \n\n:::important\nCheck out the [`Config.spacing`](/docs/system-props#configspacing) type signature.\n:::\n\n#### `p`\n\n- CSS Key: `padding`\n- Type: `responsiveProp<Config.spacing>`\n\n#### `px`\n\n- CSS Key: `padding-left`, `padding-right`\n- Type: `responsiveProp<Config.spacing>`\n\n#### `py`\n\n- CSS Key: `padding-top`, `padding-bottom`\n- Type: `responsiveProp<Config.spacing>`\n\n#### `m`\n\n- CSS Key: `margin`\n- Type: `responsiveProp<Config.spacing>`\n\n#### `mx`\n\n- CSS Key: `margin-left`, `margin-right`\n- Type: `responsiveProp<Config.spacing>`\n\n#### `my`\n\n- CSS Key: `margin-top`, `margin-bottom`\n- Type: `responsiveProp<Config.spacing>`\n\n### Flex \n\n#### `justifyContent`\n- CSS Key: `justify-content`\n- Type: `responsiveProp<[` \n  - `| #initial `\n  - `| #\"space-between\" `\n  - `| #center `\n  - `| #\"flex-start\" `\n  - `| #\"flex-end\" `\n  - `| #\"space-around\" `\n  - `| #\"space-evenly\" `\n  - `| #start `\n  - `| #end `\n  - `| #left `\n  - `| #right `\n  - `| #revert `\n  - `| #unset `\n\n  `]>`\n\n#### `alignItems` \n- CSS Key: `align-items`\n- Type: `responsiveProp< [|` \n  - `| #initial `\n  - `| #center `\n  - `| #start `\n  - `| #end `\n  - `| #\"flex-start\" `\n  - `| #\"flex-end\" `\n  - `| #\"self-start\" `\n  - `| #\"self-end\" `\n  \n  `]>`\n\n#### `flexDirection`\n- CSS Key: `flex-direction`\n- Type: `responsiveProp<[`\n  - `| #row `\n  - `| #\"row-reverse\" `\n  - `| #column `\n  - `| #\"column-reverse\" `\n  - `| #inherit `\n  - `| #initial `\n  - `| #unset `\n  \n  `]>`\n\n#### `flexBasis`\n- CSS Key: `flex-basis`\n- Type: `responsiveProp<[` \n  - `| #length(Length.t) `\n  - `| #auto `\n  - `| #fill `\n  - `| #content `\n  - `| #\"max-content\" `\n  - `| #\"min-content\" `\n  - `| #\"fit-content\" `\n\n  `]>`\n\n#### `flexWrap`\n- CSS Key: `flex-wrap`\n- Type: `responsiveProp<[` \n  - `| #nowrap `\n  - `| #wrap `\n  - `| #\"wrap-reverse\" `\n  - `| #inherit `\n  - `| #initial `\n  - `| #unset`\n\n  `]>`\n\n#### `flexGrow`\n- CSS Key: `flex-grow`\n- Type: `responsiveProp<[`\n  - `| #num(float) `\n  - `| #inherit `\n  - `| #initial` \n  - `| #revert `\n  - `| #unset `\n  \n `]>`\n\n#### `alignContent`\n- CSS Key: `align-content`\n- Type: `responsiveProp<[` \n  - `| #center `\n  - `| #start `\n  - `| #end `\n  - `| #\"flex-end\" `\n  - `| #normal `\n  - `| #baseline `\n  - `| #\"first-baseline\" `\n  - `| #\"last-baseline\" `\n  - `| #\"space-between\" `\n  - `| #\"space-around\" `\n  - `| #\"space-evenly\" `\n  - `| #stretch `\n  - `| #\"safe-center\" `\n  - `| #\"unsafe-center\" `\n  - `| #inherit `\n  - `| #initial `\n  - `| #unset `\n  - `| #\"flex-start\" `\n  \n  `]>`\n\n#### `alignSelf`\n- CSS Key: `align-self`\n- Type: `AlignContent.t`\n\n#### `justifySelf`\n- CSS Key: `justify-self`\n- Type: `AlignContent.t`\n\n#### `flexFlow`\n- CSS Key: `flex-flow`\n- Type: `(FlexDirection.t, FlexWrap.t)`\n\n#### `gap`\n- CSS Key: `gap`\n- Type: `responsiveProp<[`\n - `| #one(Config.spacing)`\n - `| #two(Config.t, Config.spacing) `\n - `| #inherit`\n - `| #initial`\n - `| #revert`\n - `| #unset`\n \n`]>`\n\n### Border\n\n:::important\nCheck out the [`Config.radius`](/docs/system-props#configradius) type signature.\n:::\n\n#### `borderRadius`\n- CSS Key: `border`\n- Type: `responsiveProp<Config.radius>`\n\n#### `borderTLRadius`\n- CSS Key: `border-top-left-radius`\n- Type: `responsiveProp<Config.radius>`\n\n#### `borderTRRadius`\n- CSS Key: `border-top-right-radius`\n- Type: `responsiveProp<Config.radius>`\n\n\n#### `borderBLRadius`\n- CSS Key: `border-bottom-left-radius`\n- Type: `responsiveProp<Config.radius>`\n\n#### `borderBRRadius`\n- CSS Key: `border-bottom-right-radius`\n- Type: `responsiveProp<Config.radius>`\n\n:::important\nCheck out the [`Border.t`](/docs/system-props#bordert) and [`BordeStyle.t`](/docs/system-props/#borderstylet) type signature.\n:::\n\n#### `border`\n- CSS Key: `border`\n- Type: `responsiveProp<Border.t>`\n\n#### `borderTop`\n\n- CSS Key: `border-top`\n- Type: `responsiveProp<Border.t>`\n\n#### `borderBottom`\n- CSS Key: `border-bottom`\n- Type: `responsiveProp<Border.t>`\n\n#### `borderLeft`\n- CSS Key: `border-left`\n- Type: `responsiveProp<Border.t>`\n\n#### `borderRight`\n- CSS Key: `border-right`\n- Type: `responsiveProp<Border.t>`\n\n#### `borderTopStyle`\n- CSS Key: `border-top-style`\n- Type: `responsiveProp<BorderStyle.t>`\n\n#### `borderBottomStyle`\n- CSS Key: `border-bottom-style`\n- Type: `responsiveProp<BorderStyle.t>`\n\n#### `borderLeftStyle`\n- CSS Key: `border-left-style`\n- Type: `responsiveProp<BorderStyle.t>`\n\n#### `borderRightStyle`\n- CSS Key: `border-right-style`\n- Type: `responsiveProp<BorderStyle.t>`\n\n#### `borderTopWidth`\n- CSS Key: `border-top-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `borderBottomWidth`\n- CSS Key: `border-bottom-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `borderLeftWidth`\n- CSS Key: `border-left-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `borderRightWidth`\n- CSS Key: `border-right-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `borderTopColor`\n- CSS Key: `border-top-color`\n- Type: `responsiveProp<Color.t>`\n\n#### `borderBottomColor`\n- CSS Key: `border-bottom-color`\n- Type: `responsiveProp<Color.t>`\n\n#### `borderLeftColor`\n- CSS Key: `border-left-color`\n- Type: `responsiveProp<Color.t>`\n\n#### `borderRightColor`\n- CSS Key: `border-right-color`\n- Type: `responsiveProp<Color.t>`\n\n### Size\n\n#### `width`\n- CSS Key: `width`\n- Type: `responsiveProp<Length.t>`\n\n#### `height`\n- CSS Key: `height`\n- Type: `responsiveProp<Length.t>`\n\n#### `maxW`\n- CSS Key: `max-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `minW`\n- CSS Key: `min-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `maxH`\n- CSS Key: `max-width`\n- Type: `responsiveProp<Length.t>`\n\n#### `minH`\n- CSS Key: `min-width`\n- Type: `responsiveProp<Length.t>`\n\n:::important\nCheck out the [`Length.t`](/docs/system-props#lengtht) type signature.\n:::\n\n### Texts\n\n#### `fontFamily`\n- CSS Key: `font-family`\n- Type: `responsiveProp<[` \n  - `| #custom(array<string>)`\n  - `| #initial`\n  - `| #inherit` \n  `]>`\n\n\n\n#### `fontWeight`\n- CSS Key: `font-weight`\n- Type: `responsiveProp<[` \n  - `| #normal `\n  - `| #bold `\n  - `| #bolder `\n  - `| #lighter `\n  - `| #100 `\n  - `| #200 `\n  - `| #300 `\n  - `| #400 `\n  - `| #500 `\n  - `| #600 `\n  - `| #700 `\n  - `| #800 `\n  - `| #900 `\n  - `| #initial `\n  - `| #inherit` \n\n  `]>`\n\n#### `textAlign`\n- CSS Key: `text-align`\n- Type: `responsiveProp<[#center | #left | #right]>`\n\n#### `letterSpacing`\n- CSS Key: `letter-spacing`\n- Type: `responsiveProp<Length.t>`\n\n#### `lineHeight`\n- CSS Key: `line-height`\n- Type: `responsiveProp<Length.t>`\n\n### Position & Placement\n\n#### `position`\n-  CSS Key: `position`\n-  Type: `responsiveProp<[ | #static | #relative | #absolute | #fixed | #sticky ]>`\n\n#### `top`\n- CSS Key: `top`\n- Type: `responsiveProp<Length.t>`\n\n#### `bottom`\n- CSS Key: `bottom`\n- Type: `responsiveProp<Length.t>`\n \n#### `left`\n- CSS Key: `left`\n- Type: `responsiveProp<Length.t>`\n \n#### `right`\n- CSS Key: `right`\n- Type: `responsiveProp<Length.t>`\n\n#### `zIndex`\n- CSS Key: `z-index`\n- Type: `responsiveProp<int>`\n\n### General \n\n#### `display`\n- CSS Key: `display`\n- Type: `responsiveProp<[|` \n  - `| #none `\n  - `| #inline `\n  - `| #block `\n  - `| #\"list-item\" `\n  - `| #\"inline-block\" `\n  - `| #\"inline-table\" `\n  - `| #table `\n  - `| #\"table-cell\" `\n  - `| #\"table-column\" `\n  - `| #\"table-column-group\" `\n  - `| #\"table-footer-group\" `\n  - `| #\"table-header-group\" `\n  - `| #\"table-row\" `\n  - `| #\"table-row-group\" `\n  - `| #flex`\n  - `| #\"inline-flex\" `\n  - `| #grid `\n  - `| #\"inline-grid\" `\n  - `| #\"run-in\" `\n  - `| #inherit`\n\n  `]>`\n\n#### `boxSizing`\n- CSS Key: `box-sizing`\n- Type: `responsiveProp<[| #\"content-box\" | #\"border-box\" | #initial | #inherit ]>`\n\n#### `color`\n- CSS Key: `color`\n- Type: `responsiveProp<Color.t>`\n\n#### `bgColor`\n- CSS Key: `background-color`\n- Type: `responsiveProp<Color.t>`\n\n#### `bgSize`\n- CSS Key: `background-size`\n- Type: `responsiveProp<[`\n   - `| #cover` \n   - `| #contain`\n   - `| #inherit`\n   - `| #initial`\n   - `| #unset`\n   - `| #auto`\n   - `| #length(Length.t)`\n\n`]>`\n\n#### `bgPosition`\n- CSS Key: `background-position`\n- Type: `responsiveProp<[`\n   -`| #top`\n   -`| #bottom`\n   -`| #left`\n   -`| #right`\n   -`| #center`\n   -`| #inherit`\n   -`| #initial`\n   -`| #unset`\n   -`| #length(Length.t)`\n\n`]>`\n\n#### `bgImage`\n- CSS Key: `background-image`\n- Type: `responsiveProp<[`\n   -`| #url(string)`\n   -`| #initial`\n   -`| #inherit`\n`]>`\n\n\n\n\n:::important\nCheck out the [`Color.t`](/docs/system-props#colort) type signature.\n:::\n\n#### `overflow`\n- CSS Key: `overflow`\n- Type: `responsiveProp<[#hidden | #visible | #scroll | #auto]>`\n\n#### `overflowX`\n- CSS Key: `overflow-x`\n- Type: `responsiveProp<[#hidden | #visible | #scroll | #auto]>`\n\n#### `overflowY`\n- CSS Key: `overflow-y`\n- Type: `responsiveProp<[#hidden | #visible | #scroll | #auto]>`\n\n#### `cursor`\n- CSS Key: `cursor`\n- Type: `responsiveProp<[` \n   - ` | #auto`\n   - ` | #default`\n   - ` | #none`\n   - ` | #\"context-menu\"`\n   - ` | #help`\n   - ` | #pointer`\n   - ` | #progress`\n   - ` | #wait`\n   - ` | #cell`\n   - ` | #crosshair`\n   - ` | #text`\n   - ` | #\"vertical-text\"`\n   - ` | #alias`\n   - ` | #copy`\n   - ` | #move`\n   - ` | #\"no-drop\"`\n   - ` | #\"not-allowed\"`\n   - ` | #grab`\n   - ` | #grabbing`\n   - ` | #\"all-scroll\"`\n   - ` | #\"col-resize\"`\n   - ` | #\"row-resize\"`\n   - ` | #\"n-resize\"`\n   - ` | #\"e-resize\"`\n   - ` | #\"s-resize\"`\n   - ` | #\"w-resize\"`\n   - ` | #\"ne-resize\"`\n   - ` | #\"nw-resize\"`\n   - ` | #\"se-resize\"`\n   - ` | #\"sw-resize\"`\n   - ` | #\"ew-resize\"`\n   - ` | #\"ns-resize\"`\n   - ` | #\"nesw-resize\"`\n   - ` | #\"nwse-resize\"`\n   - ` | #\"zoom-in\"`\n   - ` | #\"zoom-out\"`\n  `]>`\n\n#### `visibility`\n- CSS Key: `visibility`\n- Type: `responsiveProp<[#hidden | #visible | #collapse]>`\n\n#### `listStyleType`\n- CSS Key: `list-style-type`\n- Type: `responsiveProp<`\n    - `| #disc`\n    - `| #circle`\n    - `| #square`\n    - `| #decimal`\n    - `| #\"lower-alpha\"`\n    - `| #\"upper-alpha\"`\n    - `| #\"lower-greek\"`\n    - `| #\"lower-latin\"`\n    - `| #\"upper-latin\"`\n    - `| #\"lower-roman\"`\n    - `| #\"upper-roman\"`\n    - `| #none`\n  `]>`\n\n#### `listStylePosition`\n- CSS Key: `list-style-position`\n- Type: `responsiveProp<`\n    - `| #inside`\n    - `| #outside`\n\n  `]>`\n\n#### `listStyleImage`\n- CSS Key: `list-style-image`\n- Type: `responsiveProp<`\n    - `| #url(string)`\n\n  `]>`\n\n#### `listStyle`\n- CSS Key: `list-style`\n- Type: `responsiveProp<`\n   - `| #\"type\"(ListStyleType.t)`\n   - `| #position(ListStylePosition.t)`\n   - `| #image(ListStyleImage.t)`\n   - `| #short(ListStyleType.t, ListStylePosition.t, ListStyleImage.t)`\n   - `| #inherit`\n   - `| #initial`\n   - `| #revert`\n   - `| #unset`\n   - `| #none`\n\n  `]>`\n\n#### `outlineStyle`\n- CSS Key: `outline-style`\n- Type: `responsiveProp<`\n    - `| #none`\n    - `| #hidden`\n    - `| #dotted`\n    - `| #dashed`\n    - `| #solid`\n    - `| #double`\n    - `| #groove`\n    - `| #ridge`\n    - `| #inset`\n    - `| #outset`\n\n  `]>`\n\n#### `outline`\n- CSS Key: `outline`\n- Type: `responsiveProp<`\n  - `| #short(Length.t, OutlineStyle.t, Color.t)`\n  - `| #inherit`\n  - `| #initial`\n  - `| #unset`\n\n  `]>`\n\n\n#### `textDecorationStyle`\n- CSS Key: `text-decoration-style`\n- Type: `responsiveProp<[#solid | #double | #dotted | #dashed | #wavy]>`\n\n#### `textDecorationLine`\n- CSS Key: `text-decoration-line`\n- Type: `responsiveProp<[#none | #underline | #overline | #\"line-through\" | #blink]>`\n\n#### `textDecoration`\n- CSS Key: `text-decoration`\n- Type: `responsiveProp<[`\n   - `| #short(TextDecorationLine.t, Color.t, TextDecorationStyle.t)`\n   - `| #initial`\n   - `| #inherit`\n   - `| #none`\n\n`]>`\n\n\n#### `transform`\n- CSS Key: `transform`\n- Type: `responsiveProp<Transform.t>`\n\n:::important\nCheck out the [`Transform.t`](/docs/system-props#transformt) type signature.\n:::\n\n## Types reference\n\n### `Config.spacing`\n\nThe `Config.spacing` type is customizable, check out its [customization section](/docs/customization#spacing). By default, it's typed as an `int`.\n\n```rescript\n  type spacing = int\n```\n\n### `Config.radius`\n\nThe `Config.radius` type is customizable, check out its [customization section](/docs/customization#border-radius). By default, it's typed as an `int`.\n\n```rescript\n  type radius = int\n```\n\n### `Length.t`\nUsed by props like `width`, `height`, `line-height`, etc:\n```rescript\n  type t = [\n    | #ch(float)\n    | #em(float)\n    | #ex(float)\n    | #rem(float)\n    | #vh(float)\n    | #vw(float)\n    | #vmin(float)\n    | #vmax(float)\n    | #px(int)\n    | #pxFloat(float)\n    | #cm(float)\n    | #mm(float)\n    | #inch(float)\n    | #pc(float)\n    | #pt(int)\n    | #zero\n    | #pct(float)\n    | #add(t, t)\n    | #sub(t, t)\n    | #mult(t, t)\n    | #div(t, t)\n  ]\n```\n\n### Using CSS `calc`\n```rescript\n  <Box width=[xs(#add(1.6->#rem, 10->#px))]>\n    ...\n  </Box>\n```\nThe expression `#add(1.6->#rem, 10->#px)` is equivalent to `calc(1.6rem + 10px)` in plain CSS. You can replace `#add` by `#sub`, `#mult` or `#div` to use another calc operator.\n\n### `BorderStyle.t`\n\nUsed by props like `borderLeftStyle`, `borderStyle`, etc:\n```rescript\n  type t = [\n    | #none\n    | #hidden\n    | #dotted\n    | #dashed\n    | #solid\n    | #double\n    | #groove\n    | #ridge\n    | #inset\n    | #outset\n  ]\n```\n\n### `Border.t`\n\nUsed by props like `border`, `borderTop`, etc:\n```rescript\n  type t = (Length.t, BorderStyle.t, Color.t)\n```\n\n### `Color.t`\nUsed by props like `border`, `bgColor`, `color`, etc:\n```rescript\n  type t = [\n    | #rgb(int, int, int)\n    | #hex(string)\n    | #transparent\n    | #currentColor\n  ]\n```\n\n### `Transform.t`\nUsed by `transform`:\n```rescript\n  type t = [\n    | #translate(Length.t, Length.t)\n    | #translate3d(Length.t, Length.t, Length.t)\n    | #translateX(Length.t)\n    | #translateY(Length.t)\n    | #translateZ(Length.t)\n    | #scale(float, float)\n    | #scale3d(float, float, float)\n    | #scaleX(float)\n    | #scaleY(float)\n    | #scaleZ(float)\n    | #rotate(Angle.t)\n    | #rotate3d(float, float, float, Angle.t)\n    | #rotateX(Angle.t)\n    | #rotateY(Angle.t)\n    | #rotateZ(Angle.t)\n    | #skew(Angle.t, Angle.t)\n    | #skewX(Angle.t)\n    | #skewY(Angle.t)\n    | #perspective(int)\n  ]\n  ```\n"
  },
  {
    "path": "website/docs/use-responsive-value/ResponsiveValueExample.res",
    "content": "open Ancestor\n\nmodule Card = {\n  @react.component\n  let make = (~color, ~label) =>\n    <Box\n      borderRadius=[xs(1)]\n      p=[xs(3)]\n      fontSize=[xs(24->#px)]\n      color=[xs(\"#fafafa\"->#hex)]\n      bgColor=[xs(color)]>\n      {label->React.string}\n    </Box>\n}\n\n@react.component\nlet make = () => {\n  let color = Ancestor.useResponsiveValue(\n    Theme.Colors.black,\n    [xs(Theme.Colors.gray1), md(Theme.Colors.black)],\n  )\n  let label = Ancestor.useResponsiveValue(\n    \"Default\",\n    [\n      xs(\"This text appears on xs\"),\n      md(\"This text text appears on sm\"),\n      lg(\"This text appears on lg\"),\n    ],\n  )\n\n  <Card color label />\n}\n"
  },
  {
    "path": "website/docs/use-responsive-value/use-responsive-value.md",
    "content": "---\ntitle: useResponsiveValue(...)\n---\n\nimport CodeBlock from '@theme/CodeBlock'\nimport { Wrapper } from '../_helpers'\nimport ResponsiveValueExampleSource from '!!raw-loader!./ResponsiveValueExample.res'\nimport { make as ResponsiveValueExample } from './ResponsiveValueExample.bs'\n\n`useResponsiveValue(...)` is a custom hook that returns the value for the current breakpoint. You provide an array of responsive values\nand it returns the value for the current breakpoint.\n\n<CodeBlock className='language-rescript'> {ResponsiveValueExampleSource}</CodeBlock>\n\n:::important\nResize your browser to see the responsive values in action.\n:::\n\n<Wrapper> <ResponsiveValueExample /> </Wrapper>\n\n## API\nThe hook has the following type signature\n```rescript\nlet useResponsiveValue:(\n 'value,\n  ResponsiveValueHook.Styles.responsiveProp<'value>,\n) => 'value\n```\n"
  },
  {
    "path": "website/docusaurus.config.js",
    "content": "const theme = require('prism-react-renderer/themes/nightOwl')\n\n/** @type {import('@docusaurus/types').DocusaurusConfig} */\nmodule.exports = {\n  title: 'Ancestor — UI primitives for ReScript and React',\n  tagline: '',\n  url: 'https://ancestor.rescriptbrasil.org',\n  baseUrl: '/',\n  onBrokenLinks: 'throw',\n  onBrokenMarkdownLinks: 'warn',\n  favicon: 'img/favicon.ico',\n  organizationName: 'rescriptbr',\n  projectName: 'ancestor',\n  themeConfig: {\n    colorMode: {\n      defaultMode: 'light',\n      disableSwitch: true,\n    },\n    navbar: {\n      logo: {\n        alt: 'Ancestor Logo',\n        src: 'img/logo-black.svg',\n      },\n      items: [\n        {\n          type: 'doc',\n          docId: 'intro',\n          position: 'left',\n          label: 'Documentation',\n        },\n        {\n          href: 'https://github.com/rescriptbr/ancestor',\n          label: 'GitHub',\n          position: 'right',\n        },\n      ],\n    },\n    footer: {\n      style: 'dark',\n      links: [\n        {\n          title: 'ReScript Brazil',\n          items: [\n            {\n              label: 'Discord',\n              href: 'https://discord.gg/wj7Ak9JJtZ',\n            },\n            {\n              label: 'Twitter',\n              href: 'https://twitter.com/rescriptbr',\n            },\n            {\n              label: 'GitHub',\n              href: 'https://github.com/rescriptbr',\n            },\n          ],\n        },\n        {\n          title: 'About',\n          items: [\n            {\n              label: 'Getting Started',\n              to: '/docs/intro',\n            },\n            {\n              label: 'Docs',\n              to: '/docs/intro',\n            },\n            {\n              label: 'GitHub',\n              href: 'https://github.com/rescriptbr/ancestor',\n            },\n          ],\n        },\n      ],\n      copyright: `Copyright © ${new Date().getFullYear()} ReScript Brazil Community, Built with Docusaurus and ReScript.`,\n    },\n    prism: {\n       additionalLanguages: ['rescript'],\n      theme: theme,\n      darkTheme: theme,\n    },\n  },\n  presets: [\n    [\n      '@docusaurus/preset-classic',\n      {\n        docs: {\n          sidebarPath: require.resolve('./sidebars.js'),\n          editUrl:\n            'https://github.com/facebook/docusaurus/edit/master/website/',\n        },\n        theme: {\n          customCss: require.resolve('./src/css/app.css'),\n        },\n      },\n    ],\n  ],\n}\n"
  },
  {
    "path": "website/package.json",
    "content": "{\n  \"name\": \"website\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"rescript:build\": \"rescript build -with-deps\",\n    \"rescript:watch\": \"rescript build -w\",\n    \"rescript:clean\": \"rescript clean\",\n    \"rescript:format\": \"rescript format\",\n    \"docusaurus\": \"docusaurus\",\n    \"start\": \"docusaurus start\",\n    \"build\": \"yarn rescript:build && docusaurus build\",\n    \"swizzle\": \"docusaurus swizzle\",\n    \"deploy\": \"docusaurus deploy\",\n    \"serve\": \"docusaurus serve\",\n    \"clear\": \"docusaurus clear\",\n    \"write-translations\": \"docusaurus write-translations\",\n    \"write-heading-ids\": \"docusaurus write-heading-ids\",\n    \"prettier\": \"prettier --write 'src/**/*.{js,json,md}'\"\n  },\n  \"dependencies\": {\n    \"@docusaurus/core\": \"2.0.1\",\n    \"@docusaurus/preset-classic\": \"2.0.1\",\n    \"@mdx-js/react\": \"^1.6.21\",\n    \"@rescript/react\": \"0.10.3\",\n    \"@rescriptbr/ancestor\": \"1.0.0-2\",\n    \"@svgr/webpack\": \"^5.5.0\",\n    \"clsx\": \"^1.1.1\",\n    \"file-loader\": \"^6.2.0\",\n    \"prettier\": \"2.3.2\",\n    \"prism-react-renderer\": \"^1.2.1\",\n    \"raw-loader\": \"4.0.2\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"rescript\": \"9.1.4\",\n    \"url-loader\": \"^4.1.1\",\n    \"prismjs\": \"1.28.0\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.5%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"devDependencies\": {}\n}\n"
  },
  {
    "path": "website/sidebars.js",
    "content": "module.exports = {\n  docs: [\n    'intro',\n    'getting-started',\n    'customization/customization',\n    {\n      type: `category`,\n      label: `API Reference`,\n      collapsed: false,\n      items: [\n        'system-props',\n        'api/base',\n        'api/box',\n        'api/grid',\n        'api/hidden',\n        'api/stack',\n        'use-responsive-value/use-responsive-value'\n      ],\n    },\n  ],\n}\n"
  },
  {
    "path": "website/src/bindings/Docusaurus.res",
    "content": "type siteConfig = {title: string}\n\ntype docusaurusContext = {siteConfig: siteConfig}\n\n@module(\"@docusaurus/useDocusaurusContext\")\nexternal useDocusaurusContext: unit => docusaurusContext = \"default\"\n\nmodule Layout = {\n  @react.component @module(\"@theme/Layout\")\n  external make: (~title: string, ~description: string, ~children: React.element) => React.element =\n    \"default\"\n}\n"
  },
  {
    "path": "website/src/css/app.css",
    "content": "@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');\n\nhtml, body {\n  overflow-x: hidden;\n}\n\n::selection {\n  background: #000;\n  color: #fff;\n}\n\nh1,h2,h3,h4,h5,h6,button,a {\n  font-family: 'DM Sans';\n}\n\n/**\n * Theming\n * */\n:root {\n  --gray-2: #B1B1B1;\n  --ifm-color-primary: #ff3366;\n  --ifm-color-primary-dark: rgb(33, 175, 144);\n  --ifm-color-primary-darker: rgb(31, 165, 136);\n  --ifm-color-primary-darkest: rgb(26, 136, 112);\n  --ifm-color-primary-light: rgb(70, 203, 174);\n  --ifm-color-primary-lighter: rgb(102, 212, 189);\n  --ifm-color-primary-lightest: rgb(146, 224, 208);\n  --ifm-code-font-size: 95%;\n  --ifm-font-family-base: 'DM Sans', sans-serif;\n  --xxs: 0px;\n  --xs: 475px;\n  --sm: 600px;\n  --md: 920px;\n  --lg: 1280px;\n}\n\n\n/**\n * Footer\n * */\n.footer--dark {\n  --ifm-footer-background-color: #000;\n}\n\n.footer__copyright {\n  margin-top: 56px;\n}\n\n/*\n \n * Navbar\n * **/\n@media only screen and (max-width: 995px) {\n  .navbar__items {\n    flex-direction: row-reverse;\n    justify-content: space-between;\n  }\n}\n\n.theme-code-block-highlighted-line {\n  background-color: rgb(255 255 255 / 7%)!important;\n}\n"
  },
  {
    "path": "website/src/helpers/Render.res",
    "content": "let s = React.string\n"
  },
  {
    "path": "website/src/pages/Home/Home.res",
    "content": "open Render\n\n@module(\"./home.module.css\") external styles: {..} = \"default\"\n\nmodule Memphis = {\n  module Lines = {\n    @react.component\n    let make = (~id) => {\n      <img src=\"/img/memphis-01.svg\" id />\n    }\n  }\n  module Square = {\n    @react.component\n    let make = (~id) => {\n      <img src=\"/img/memphis-02.svg\" id />\n    }\n  }\n\n  module Circle = {\n    @react.component\n    let make = (~id) => {\n      <img src=\"/img/memphis-03.svg\" id />\n    }\n  }\n\n  @react.component\n  let make = () => {\n    <div className={styles[\"memphis\"]}>\n      <Lines id={styles[\"lines-1\"]} />\n      <Lines id={styles[\"lines-2\"]} />\n      <Square id={styles[\"square-1\"]} />\n      <Circle id={styles[\"circle-1\"]} />\n      <Square id={styles[\"square-2\"]} />\n      <Circle id={styles[\"circle-2\"]} />\n    </div>\n  }\n}\n\nmodule Hero = {\n  @react.component\n  let make = () => {\n    <section className={styles[\"hero\"]}>\n      <Memphis />\n      <div className={styles[\"hero--title-container\"]}>\n        <h1 className={styles[\"hero--title\"]}> {\"Simple, fast and powerful\"->s} </h1>\n        <p className={styles[\"hero--text\"]}>\n          {`A suite of UI primitives for ReScript and React with focus on responsiveness.`->s}\n        </p>\n      </div>\n      <div className={styles[\"hero--image\"]}> <img src=\"/img/hero-symbol.svg\" /> </div>\n    </section>\n  }\n}\n\nmodule AboutItem = {\n  @react.component\n  let make = (~icon, ~title, ~description) => {\n    <div className={styles[\"about--item\"]}>\n      <img src=icon /> <h2> {title->s} </h2> <p> {description->s} </p>\n    </div>\n  }\n}\n\nmodule About = {\n  @react.component\n  let make = () => {\n    <section className={styles[\"about\"]}>\n      <div className={styles[\"about--row\"]}>\n        <AboutItem\n          icon=\"/img/layout-icon.svg\"\n          title=\"UI primitives\"\n          description=\"A set of unstyled components that works as UI primitives.\"\n        />\n        <AboutItem\n          icon=\"/img/responsive-icon.svg\"\n          title=\"Focus on Responsiveness\"\n          description=\"All system props are responsive.\"\n        />\n      </div>\n      <div className={styles[\"about--row\"]}>\n        <AboutItem\n          icon=\"/img/focus-icon.svg\"\n          title=\"Focused on ReScript\"\n          description=\"It's not a set of bindings for an existing library, Ancestor was written with ReScript.\"\n        />\n        <AboutItem\n          icon=\"/img/customizable-icon.svg\"\n          title=\"Simple and customizable\"\n          description=\"Breakpoints, spacing, radius and all properties are customizable.\"\n        />\n      </div>\n    </section>\n  }\n}\n\nmodule CodePreview = {\n  @react.component\n  let make = () => {\n    <div className={styles[\"code-preview\"]}>\n      <div className={styles[\"code-preview--texts\"]}>\n        <h2> {`Built for ReScript`->s} </h2>\n        <p>\n          {`It's not a set of bindings for an existing library, Ancestor was created from scratch to use with ReScript.`->s}\n        </p>\n      </div>\n      <img width=\"\" src=\"/img/snippet.png\" />\n    </div>\n  }\n}\n\nmodule StartUsing = {\n  @react.component\n  let make = () => {\n    <div className={styles[\"start-box\"]}>\n      <div className={styles[\"start-box--texts\"]}>\n        <h2> {`Start using right now`->s} </h2>\n        <p>\n          {`This project is still beta but also actively maintained. It's used in some production `->s}\n          <br />\n          {`projects daily and keep breaking changes to a minimum whereever possible.`->s}\n        </p>\n      </div>\n      <a href=\"/docs/getting-started\"> <button> {`Let’s start`->s} </button> </a>\n    </div>\n  }\n}\n\n@react.component\nlet make = () => {\n  <Docusaurus.Layout\n    title=``\n    description=\"A suite of UI primitives for ReScript and React focused on responsiveness.\">\n    <main> <Hero /> <About /> <CodePreview /> <StartUsing /> </main>\n  </Docusaurus.Layout>\n}\n\nlet default = make\n"
  },
  {
    "path": "website/src/pages/Home/home.module.css",
    "content": ".hero--title {\n  color: #000;\n  font-family: DM Sans;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 46px;\n  line-height: 60px;\n  letter-spacing: -0.07em;\n}\n\n.hero--text {\n  font-family: DM Sans;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 32px;\n  line-height: 42px;\n  letter-spacing: -0.04em;\n  color: var(--gray-2);\n}\n\n/*\n * About\n * */\n\n.about--item > h2 {\n  font-family: DM Sans;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 24px;\n  line-height: 31px;\n  margin: 0;\n  margin-bottom: 8px;\n  text-align: center;\n}\n\n.about--item > p {\n  font-family: DM Sans;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 23px;\n  color: var(--gray-2);\n  text-align: center;\n}\n\n@media only screen and (min-width: 0px) {\n  .hero {\n    position: relative;\n    padding: 124px 32px;\n  }\n\n  .hero--image {\n    display: none;\n  }\n\n  #lines-1 {\n    top: 42px;\n    left: -32px;\n    position: absolute;\n  }\n\n  #lines-2 {\n    bottom: 0px;\n    right: -32px;\n    position: absolute;\n  }\n\n  #square-1 {\n    position: absolute;\n    bottom: 32px;\n    left: 56px;\n  }\n\n  #circle-1 {\n    position: absolute;\n    bottom: 16px;\n    left: 124px;\n  }\n\n  #square-2 {\n    position: absolute;\n    top: 72px;\n    right: 92px;\n  }\n\n  #circle-2 {\n    position: absolute;\n    top: 56px;\n    right: 56px;\n  }\n\n  .about {\n    margin: 92px auto;\n    padding: 0 32px;\n  }\n\n  .about--item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: 56px;\n  }\n\n  .about--row {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .about--item > img {\n    width: 46px;\n    margin-bottom: 18px;\n  }\n\n  .code-preview {\n    padding: 32px;\n  }\n\n  .code-preview--texts > h2 {\n    font-family: DM Sans;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 42px;\n    line-height: 55px;\n    letter-spacing: -0.07em;\n    margin: 0;\n    margin-bottom: 8px;\n  }\n\n  .code-preview--texts > p {\n    font-family: DM Sans;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 26px;\n    line-height: 32px;\n    color: var(--gray-2);\n    letter-spacing: -0.06em;\n    margin: 0;\n  }\n\n  .code-preview--texts {\n    margin-bottom: 46px;\n  }\n\n  .start-box {\n    background: #000;\n    margin: 124px 0;\n    padding: 32px;\n  }\n  \n  .start-box--texts > h2 {\n    color: white;\n    margin-bottom: 16px;\n    font-family: DM Sans;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 32px;\n    line-height: 32px;\n    letter-spacing: -0.04em;\n  }\n\n  .start-box--texts > p {\n    font-family: DM Sans;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 20px;\n    line-height: 28px;\n    letter-spacing: -0.04em;\n    color: var(--gray-2);\n  }\n    \n  .start-box > a {\n    text-decoration: none;\n  }\n\n  .start-box > a > button {\n    height: 52px;\n    border-radius: 32px;\n    width: 192px;\n    background: #fafafa;\n    font-family: DM Sans;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 20px;\n    line-height: 23px;\n    text-align: center;\n    letter-spacing: -0.04em;\n    outline: none;\n    border: 0;\n    cursor: pointer;\n  }\n\n  .start-box > a > button:hover {\n    background: #e4e4e4;\n  }\n}\n\n@media only screen and (min-width: 600px) {\n  .start-box {\n    padding: 56px;\n  }\n\n  .hero {\n    padding: 132px 42px;\n  }\n}\n\n@media only screen and (min-width: 920px) {\n  .hero {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    max-width: 1280px;\n    margin: 0 auto;\n  }\n\n  .hero--image {\n    display: block;\n  }\n\n  .hero--title-container {\n    flex-basis: 50%;\n    z-index: 10;\n  }\n\n  #lines-1 {\n    top: 72px;\n    left: -24px;\n    position: absolute;\n  }\n\n  #lines-2 {\n    bottom: -56px;\n    right: -16px;\n    position: absolute;\n  }\n\n  #square-1 {\n    position: absolute;\n    bottom: 56px;\n    left: 92px;\n  }\n\n  #circle-1 {\n    position: absolute;\n    bottom: 32px;\n    left: 150px;\n  }\n\n  #square-2 {\n    position: absolute;\n    top: 72px;\n    right: 200px;\n  }\n\n  #circle-2 {\n    position: absolute;\n    top: 56px;\n    right: 250px;\n  }\n\n  .about {\n    max-width: 1280px;\n    margin: 124px auto;\n    padding: 0 124px;\n  }\n\n  .about--item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-basis: 50%;\n    padding: 0 32px;\n  }\n\n  .about--item:nth-child(1) {\n    margin-right: 124px;\n  }\n\n  .about--row {\n    display: flex;\n    flex-direction: row;\n    margin-bottom: 72px;\n  }\n\n  .about--item > img {\n    width: 46px;\n    margin-bottom: 18px;\n  }\n\n  .code-preview {\n    padding: 32px;\n    max-width: 1280px;\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    margin-bottom: 124px;\n  }\n\n  .code-preview--texts {\n    margin-bottom: 0;\n    margin-right: 32px;\n  }\n  \n  .start-box {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .start-box {\n    max-width: 1280px;\n    margin: 224px auto;\n    display: flex;\n    align-items: center;\n    padding: 72px;\n    margin-bottom: 124px;\n  }\n}\n\n@media only screen and (min-width: 1920px) {\n  .about--item:nth-child(1) {\n    margin-right: 224px;\n  }\n}\n"
  },
  {
    "path": "website/src/pages/index.js",
    "content": "import React from 'react'\nimport Home from './Home/Home.bs'\n\nexport default Home\n"
  },
  {
    "path": "website/src/pages/markdown-page.md",
    "content": "---\ntitle: Markdown page example\n---\n\n# Markdown page example\n\nYou don't need React to write simple standalone pages.\n"
  },
  {
    "path": "website/static/.nojekyll",
    "content": ""
  }
]